How to Style a List with Font Awesome Icons

So we already know how to create really cool pure CSS social media icons using Font Awesome, but what else can we do with this awesome icon library? One really cool way to utilize the icons is by using them in place of bullets when styling unordered lists.

Font Awesome is a library of hundreds of different icons and symbols that can be used for free by developers in any project. It’s a really useful tool to have, especially because using Font Awesome icons are almost always superior to using pngs or jpegs as icons because of how well the Font Awesome characters (color, size, etc) can be manipulated by CSS.

Using the Font Awesome icons in place of bullets or discs that are usually used to style unordered lists is a really cool way to add some unique flair to an otherwise boring list, and it’s also a pretty innovative way to use the Font Awesome library. Keep reading to see how it’s done.

Getting Font Awesome

Like most libraries, Font Awesome can be downloaded and placed onto your server, but the best and most lightweight way to use it is probably to link to the library directly, either in your head section or at the top of your stylesheets using the @import rule. Here’s the link you can insert into the head:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

The HTML

We’re gonna start by creating a standard unordered list. If you’re not sure how to build one, check out the HTML below:

<ul>
  <li>First list item</li>
  <li>Second list item</li>
  <li>Third list item</li>
  <li>Fourth list item</li>
  <li>Fifth list item</li>
</ul>

The results of which should look a little bit like this:

Screen Shot 2016-11-27 at 3.36.33 PM

The CSS

The CSS is where you’ll get rid of the standard bullet points and replace them with a cool Font Awesome icon of your choice using the content property combined with the :before pseudo-selector. First, pick the Font Awesome icon you’d like to use as the list item icon. You can see all of the hundreds of Font Awesome icons to choose from on this page.

First, set the list-style-type to none:

li{
  list-style-type: none;
}

So now the list should have no bullets:

Screen Shot 2016-11-27 at 3.49.39 PM

Now we’ll need to use the :before pseudo-selector to select the space before the list items, and the content property to insert the Font Awesome icons as the content before the list items.

In this case, let’s pretend we’re creating a list with a nautical theme, so our Font Awesome icon of choice might be the anchor icon, the unicode code of which is f13d. To use the anchor icon as the list item icon, use the following CSS:

li:before{
content: “\f13d”;
font-family: “FontAwesome”;
width: 10px;
height: 10px;
margin-right: 5px;
}

The results of which should look like this:

Screen Shot 2016-11-27 at 3.56.52 PM

Don’t forget you can also add some color to these icons. Check it out:

li:before{
color: #147efb;
}

Screen Shot 2016-11-27 at 3.58.20 PM

How’s that for a nautical themed list? There are so many Font Awesome icons available that the possibilities for styling your lists are practically endless. Definitely keep this technique in the back of your mind for when you’re looking to create some unique lists.

Using Font Awesome to Create Social Icons

Font Awesome is a really useful tool that provides developers with free access to hundreds of different icons and symbols to use in the projects in place of images and pngs. The great thing about using Font Awesome icons is that because they’re technically characters instead of images, the colors and sizes of the characters can easily be customized using CSS style rules. You can even really easily add hover effects and styling for active and visited states by using the CSS pseudo elements (:hover, :active, :visited).

One really great way to take advantage of these Font Awesome icons is by using them to create social media icons — you know, those buttons you’ll find on almost every site that links to a site’s social media presences. Usually these are created in photoshop and uploaded to a server, but if you’re planning on creating simple or basic social media buttons, Font Awesome is a great, lightweight option to create them easily without having to use images. Keep reading to check out how it’s done.

Get Font Awesome Library

You can download the Font Awesome library and place it onto your server to link to, but if you want an even more lightweight option, you can simply link to their library in the <head> section of your HTML files or at the top of your StyleSheet using the @import rule. See the code you can use to link to the Font Awesome library below:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

The HTML

For this example, let’s create icons for Twitter, Facebook, and Instagram. To see a list of ALL the Font Awesome icons and their accompanying code, head over to this page. Here’s the HTML you’ll need to get started:

<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>

The results of the HTML above should look something like this:

Screen Shot 2016-11-27 at 2.46.29 PM

The CSS

To really make these icons unique we need to add some styling. Let’s turn them into rounded icons, and let’s add some colors to reflect the brands of each social media network. Take a look at the CSS below to see how it’s done.

 i.fa.fa-facebook, i.fa.fa-twitter, i.fa.fa-instagram{
 border-radius: 100%;
 font-size: 28px;
 height: 38px;
 line-height: 40px;
 margin: 5px;
 text-align: center;
 width: 38px;
 }
 i.fa.fa-facebook{
 border: 1px solid #3B5998;
 color: #3B5998;
 }
 i.fa.fa-twitter{
 border: 1px solid #00aced;
 color: #00aced;
 }
 i.fa.fa-instagram{
 border: 1px solid #833ab4;
 color: #833ab4;
 }

After applying the CSS above, your social media icons should look similar to this:

Screen Shot 2016-11-27 at 2.58.52 PM

Styled beautifully and reflecting the brand identity of each platform!

Extras: Hover Effects

Now that you’ve got your icons styled, adding hover, active, visited, etc effects using pseudo-selectors is really easy. A cool hover effect to add is to change the opacity of the icons when they’re hovered over. To do that, you just need to add the following CSS:

i.fa.fa-facebook:hover, i.fa.fa-twitter:hover, i.fa.fa-instagram:hover{
 opacity: .6;
}

Compare the icons in the image below with the one above, and you’ll see that the opacity of the Instagram icon is less opaque than the others or than the one in the image above — that’s because it has the hover effect applied to it.

Screen Shot 2016-11-27 at 3.01.34 PM

Create a Featured Ribbon Effect Using CSS

We’ve all seen those box, rectangle, or square shaped HTML elements that feature a “ribbon” draped around one of its corners to signify that this element is somehow different from the rest. The text in the corner ribbon might read “Featured” or “Limited Time Only” or “On sale!” Whatever the ribbons may say, they usually do a pretty good job of grabbing the users’ attention and letting them know what’s unique about any particular HTML element that the ribbon is applied to.

This Featured Ribbon effect is actually one that can be easily implemented using minimal CSS. The effect is created by the use and manipulation of the span elements and the :before and :after pseudo selectors. To see how it’s done, check out the example below.

The HTML

The HTML in this tutorial couldn’t be more straightforward. We’ve got an image inside of a rectangular div…and that’s pretty much it. The other div, the one with the class .corner-ribbon, makes up the featured ribbon that will appear on the corner of the element.

<div class="container">
 <div class="corner-ribbon">
 <span>Cool!</span>
 </div>
 <h4>Cool Feature</h4>
 <img src="http://lorempixel.com/175/175/" alt="placeholder image" />
</div>

The CSS

The CSS for this effect is a lot more involved than the HTML, but it’s still actually quite simple. By using the :before and :after pseudo-selectors in conjunction with transparent borders, the shape of the featured ribbon is easily created. Absolute positioning and playing with the z-index (you may need to increase the value of the z-index property depending on your project), the ribbon is featured prominently in the top right corner of the element.

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700);

body{
 font-family: 'Quicksand';
 background-color: #e6e6e6;
}

.container {
 width: 220px;
 height: 300px;
 position: relative;
 border:1px solid #444;
 background: #fff;
 margin: 25px auto;
}

.corner-ribbon {
 position: absolute;
 right: -5px; top: -5px;
 z-index: 1;
 overflow: hidden;
 width: 75px; 
 height: 75px; 
 text-align: right;
}

.corner-ribbon span {
 font-size: 12px;
 color: #fff; 
 text-transform: uppercase; 
 text-align: center;
 font-weight: bold; 
 line-height: 20px;
 transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 width: 100px; 
 display: block;
 background: #E37676;
 background: linear-gradient(#E37676, #DB5858);
 box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
 position: absolute;
 top: 19px; right: -21px;
}

.corner-ribbon span::before {
 content: '';
 position: absolute; 
 left: 0px; top: 100%;
 z-index: -1;
 border-left: 3px solid #E37676;
 border-right: 3px solid transparent;
 border-bottom: 3px solid transparent;
 border-top: 3px solid #E37676;
}
.corner-ribbon span::after {
 content: '';
 position: absolute; 
 right: 0%; top: 100%;
 z-index: -1;
 border-right: 3px solid #E37676;
 border-left: 3px solid transparent;
 border-bottom: 3px solid transparent;
 border-top: 3px solid #E37676;
}

.container h4{
 padding: 3px;
 text-align: center;
}

.container img{
 display: block;
 width: 175px;
 margin: 0 auto;
}

After adding all of the above CSS to your stylesheets,  you should end up with a final product that looks something like this:

As always, the colors, content, positioning, etc are meant to be totally customized to reflect your project. Play around with the code and have fun with it!

How to Create a Fixed Header

Fixed headers are an increasingly popular trend for styling headers or navigation menus on your site. When you add a fixed header to a page, that means that the position of the header stays fixed (usually to the top of the page, but it doesn’t necessarily have to be positioned as such) no matter how far the user scrolls down the page. This feature is helpful for anyone who wants to make sure their users always have access to particular links or navigation no matter which part of the page they may be exploring.

If you think that adding a fixed header to any of your projects might be a good idea or, at the very least, a fun experiment, you’re in luck, because it’s actually pretty easy to do. Keep reading and we’ll walk you through the basic steps.

The HTML

For a very, very basic fixed header structure, we used something like this:

<body>

<div class="header">
 <h1 class="header_logo">This is a Fixed Header</h1>
</div>
<div class="offset">
 <p>Scroll down to see the responsive header in action.</p>
</div>

</body>

It’s totally up to you what you want to include in your header. It could be navigation, links, a phone number or other contact info…the choice is completely yours. For the purposes of this demonstration, we just chose to include some text indicating that what you’re looking at is, in fact, a fixed header, and some content below that so we have something to scroll past.

The CSS

We wanted our fixed header to be purple, but the color choice and style of your header is totally up to you. The only line of CSS you absolutely can’t do without if you want the header to be fixed is position: fixed, which in our code is applied to the .header selector. The size, color, positioning, padding, font-family, and pretty much everything else can be tailored to the needs of your project or site.

Check out the CSS below:

body {
 height: 1500px;
 font-family: "Montserrat";
}

.offset {
 margin-top: 0;
 padding-top: 270px;
 text-align: center;
 -webkit-transition: .3s;
 transition: .3s;
}

.header {
 position: fixed;
 width: 100%;
 height: 100px;
 font-weight: bold;
 text-align: center;
 background: #7F6FF0;
 -webkit-transition: .3s;
 transition: .3s;
 color: #fff;
}

.header_logo {
 font-family: 'Oswald', sans-serif;
 margin: 0;
 padding-top: 8px;
 font-size: 30px;
 text-shadow: 3px 4px rgba(0, 0, 0, 0.1);
 -webkit-transition: .3s;
 transition: .3s;
}

If you use the code above, this is how your fixed header should look:

Screen Shot 2016-12-20 at 8.53.55 AM

While you can’t really appreciate the whole fixed header effect from just a screenshot, trust us when we say that when you scroll down this page , you will scroll past the text and end up with the header still stuck to the to of the page. Add the code to any of your projects to see it in action for yourself!

Best Resources to Learn to Code for Free

If you’ve ever wanted to learn how to code (or maybe you know some basics, but would like to learn more), now’s the time to do it. There are dozens of free code classes and bootcamp-type courses available to accommodate all levels and all schedules so that you can learn at your own pace. Whether you’ve never coded before in your life, or you’re an experienced coder looking to brush up their skills or learn a new language, there’s a good, free code course resource out there for you. Take a look at the list of free coding resources below to see if there’s something that suits you!

Free Code Camp

Free Code Camp is a unique resource in that it doesn’t just offer free code lessons, but it also allows its “students” to use their newly-acquired coding skills to work on real projects for non-profit organizations. Not only do you learn valuable coding skills, but you also get to start creating a portfolio that can be really helpful to you if your ultimate goal is to get a job in web development.

Codecademy

Codecademy is one of the most popular free coding resources, and has free interactive courses for several different languages, including HTML & CSS, JavaScript & jQuery, Python, Ruby, and PHP. In addition to teaching the fundamentals of these popular languages, they also offer courses in practical things, like website deployment, how to use Git, how to use SQL, how to learn Angular and Sass, etc. This resource is a great one for someone who’s interested in learning to code and wants to learn a little to see if it’s right for them.

Coursera

Coursera lets you take free coding classes from actual accredited schools and universities (schools like Hopkins, Duke, and Wesleyan, just to name a few, are among some of the ones offering free coding and computer science courses). While you will have to pay for some of the more advanced classes, it’s still a great research to receive some top notch education for free.

Udemy

Udemy is an online learning platform that offers over 40,000 courses in many different subjects, including coding and web development. Like Coursera, you’ll have to pay for some of the courses (especially the non-introductory ones), but if you’re looking to get a solid education in web development languages, this is the place to go.

HTML5 Rocks

HTML5 Rocks is a Google project that offers free tutorials and resources tailored to people who want to learn about code and tech. This site is an awesome resource for people who are already interested in web development or already know a little code, but are striving to learn more and be better informed.

Khan Academy

Like Udemy, Khan Academy offers courses in a variety of subjects, but their computer programming courses are known to be quite good. You can use Khan’s courses to teach yourself the basics of coding languages, and then you can also choose to take more advanced courses that will show you how to use the fundamentals to create projects to add to your portfolio.

Code Avengers

Code Avengers helps you to learn code interactively by letting you create web applications while learning new languages. When you’re done, you can add the projects to your portfolio to show off your skills and your coding knowledge.

 

Tips for Cross Browser Compatibility

Developing and designing for every browser type can be a very challenging (some might say impossible) task. Every browser has its own unique inherent styling that (even with the use of a reset) can be difficult to override or get rid of completely, and not every browser supports some of the newer, cool CSS properties and techniques. For these reasons, it can be really tricky to make sure that your site designs look good and consistent (and functional!) across every single browser. While accounting for cross browser compatibility can be a daunting task, it can be made easier by applying the following tips.

Use Vendor Prefixes

This one is probably the most common way to avoid cross browser compatibility issues. A lot of CSS properties (particularly the newer ones) aren’t supported on most browsers, unless you use a vendor prefix. As a developer, you may want to cover all your bases when using a CSS property that isn’t widely supported (like, for example, the transition property) to make sure that your designs (or in the case of the transition property, your animated effects) actually work in every browser. The following is a list of the vendor prefixes that can be used for every browser:

-webkit-   //chrome, android, safari, ios
-o-   //opera
-moz-   //firefox
-ms- //internet explorer

Here’s how you would use them in context:

div{
transition: all .5s ease;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
}

Don’t forget to include hyphens on either side of your prefix keyword!

Browser Hacks

If you want to target a specific property or style rule to behave a particular way based on the browser, there are a number of different CSS “hacks” that will allow you to target a specific browser and apply style rules to HTML elements only if they appear on one particular browser. This works well when you’re trying to compensate for a style or property that might work on all browsers except for one. This way, you can use a hack to single out a specific browser and change the styling only for that one to make sure your design doesn’t look funky or your functionality isn’t compromised without the unsupported CSS property. Check out the list of hacks for common browsers below:

/* Internet Explorer Versions 9+ */
@<span class="hljs-keyword">media</span> screen and (min-width:<span class="hljs-number">0</span>\<span class="hljs-number">0</span>) {
<span class="hljs-selector-class">.<strong>yourElement</strong></span> {
font-size: 12px;
}
}

/* Firefox Versions 3+ */
<span class="hljs-selector-tag">html</span>><span class="hljs-comment">/**/</span><span class="hljs-selector-tag">body</span> <span class="hljs-selector-class">.<strong>yourElement</strong></span>, <span class="hljs-selector-tag">x</span><span class="hljs-selector-pseudo">:-moz-any-link</span>, <span class="hljs-selector-tag">x</span><span class="hljs-selector-pseudo">:default</span> {
<span class="hljs-attribute">font-size: 12px;</span><span class="hljs-meta">
</span>}

/* Chrome and Safari */
@<span class="hljs-keyword">media</span> screen and (-webkit-min-device-pixel-ratio:<span class="hljs-number">0</span>) {
<span class="hljs-selector-class">.<strong>yourElement</strong></span> {
<span class="hljs-attribute">font-size</span>: 12px;<span class="hljs-number">
</span>}
}

Make sure you insert the name of the element you’d like to single out in the spot where it’s written .yourElement in bold.

Use CSS @supports Rule

The CSS @supports allows you to wrap your CSS rules within the @supports query so that the rule will only be applied if it’s supported on a particular browser. If a rule isn’t supported, it’ll get skipped over as if the rule weren’t there, which can really come in handy for those properties you want to use but don’t want to look terrible if they happen to not be supported on a browser. Here’s how you would use it in context:

@supports(transition: all .5s ease){
div{
transition: all .5s ease;
}
}

In order to use @supports, you’ll have to pass through the CSS rule you want to account for as a parameter, and then the code will take care of the rest.

HTML5 Fullscreen Background Video with CSS and JS (Plugin/Library)

Fullscreen background videos that autoplay right when the webpage loads (above the fold) has become quite a popular trend these days. Personally I think a fullscreen good quality video that autoplays does increases engagement for the users/customers. It should be kept in mind that the story of the video must be relevant to the brand. These days we’re surrounded by loads of videos on social networks like FB and Twitter as well which autoplay (but is muted of course). Analytical studies have also reported higher engagement due to this.

Continue reading “HTML5 Fullscreen Background Video with CSS and JS (Plugin/Library)”