CSS tricks: “before” pseudo element with Fontawesome

Using Fontawesome as a :before  pseudo element in CSS is pretty straight forward. Bear in mind that you need to test across browsers to make sure that the fonts don’t blow up to be gigantic – as can happen in Firefox and Internet Explorer sometimes.

The benefits of using this technique are that you get great flexibility in how you position and style the icons, which translates to more useable websites and pages – which is better for the end user.

Here’s a couple of common CSS tricks that the web squirrels at Nuttify HQ use.

Before you start

Be sure to include font awesome in your theme, or page. how to do this is beyond the scope of this article. But we like to enqueue all of our CSS with wp_enqueue_script.

Add a phone icon before a phone number

icon before phone number  champion website

To add a fontawsome phone icon before a phone number do this in your CSS:

HTML for phone icon

CSS for phone icon

Add a quote mark before a blockquote

To add a quote before a blockquote we need some basic HTML structure and some CSS with the :before pseudo element.

Use the CSS before element to add quote marks  before a block quote

HTML for blockquote

CSS for block quote

Ticks before unbulleted list items

fontawesome ticks on unordered lists champion websites

HTML for font awesome ticks

CSS for fontawesome ticks for list items

The important point for this CSS is to set  list-style: none for the actual list items

Conclusion

It’s pretty straight forward to add icons with the CSS pseudo element :before. It will take some experimentation and testing to find out what works for you. but it’s well worth it when you master this handy CSS trick.

Articles in this section

Like what you see?

Find out how we can build a champion website for you.

Call Nuttify today 1300 688 4391300 688 439
or send us a message
No comments yet.

Leave a Reply