330 Locust Dr.
Verona, WI 53593
Powderkeg Web Design
Message Us

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

January 31, 2017

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

Lead Developer

Nick is an ambitious and versatile developer with a wide range of talents. He is an efficient coder that utilizes his resources in order to achieve both his and the clients’ goals. His Alma Mater is the University of Wisconsin – Stevens Point where he graduated with honors in Web and Digital Media Development.