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 ):

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:

Smile Faces Font Awesome