Web Dev Tid Bit (WDTB): Using Font Awesome as a Divider Line

Like Font Awesome? Wish you could use it as a consistent style piece such as a dividing line? Like quick and easy pieces of code to use?

Let’s say you *really* like the smiley face Font Awesome Icon. You love it so much that you’d like to use it as a consistent style piece in your design. Instead of a boring solid line border under your H1’s you want it to be full of smiley happiness.

Enqueue Font Awesome how you normally would. Add this to your stylesheet ( we’re using Less ):

h1.smiley:after { 
   content:"f118 0a0 0a0 0a0 0a0 f118 0a0 0a0 0a0 0a0 f118 0a0 0a0 0a0 0a0 
            f118 0a0 0a0 0a0 0a0 f118 0a0 0a0 0a0 0a0 f118 0a0 0a0 0a0 0a0 
            f118 0a0 0a0 0a0 0a0 f118 0a0 0a0 0a0 0a0 f118 0a0 0a0 0a0 0a0 
            f118 0a0 0a0 0a0 0a0 f118 0a0 0a0 0a0 0a0 f118 0a0 0a0 0a0 0a0 
            f118 0a0 0a0 0a0 0a0 f118 0a0 0a0 0a0 0a0 f118 0a0 0a0 0a0 0a0 
            f118"; 
            font-family:"FontAwesome"; display:block; font-size:18px; margin:40px auto; overflow:hidden; max-width:166px; width:100%; 
 }

This will add a consistent line of smileys under all of your H1’s that you have given the “smiley” class. What we’re basically doing is using the :after pseudo class to add a repetition of smiley and space html characters. The only real stipulation is you want to make sure the content has enough smileys to fill the allotted pixels. Hence we’re setting a max width to something we know the smiley faces will fill. You can add more if you want it to be longer.

The glorious end result: