Setting up Font Awesome icons as pseudo-elements

Font Awesome is really useful for quickly adding icons to a project that you're working on, but often they're more decorative than anything else, which is why it can be really useful to use pseudo-elements to insert them, rather than adding in empty elements.

In this video, we look at adding them in, and some different ways you can approach it, by adding them to the card I started work on last week.

This video was sponsored by Skillshare

#CSS #popdogclone

--

Come hang out with other dev's in my Discord Community

---

Keep up to date with everything I'm up to

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[harishst]

Hi Kevin,
I am a backend developer, but lots of interest in frontend too. I always feel that you and your videos are so special since they talk about every aspect like how to do it, why choose that not that, what are other possibilities... They make sense and improve the viewers in the right way. May be some won't like your videos since they always look for a quick fix. But keep teaching us the unique, high-quality content, as you do always. Anyone who is into design and especially CSS, the first recommendation I do is YOU.

Thanks for this amazing content! You are amazing just like your videos! <3

[ayshasahani]

saw many videos on how to fix the font awesome icon but none of them explained the way you did. i wasted many hours in this but thanks to you. You explained greatly and solved my issue. Thank you once again.

[crawfordvining]

I've used fontawesome for a while and I always like learning that one little thing I didn't know before- this time it was the font weight making it either a filled in color or just a border on the icon! Thanks, Kevin- another great video!

[waelpilote]

This was really interesting, never thought that font awesome icons could be setup as pseudo-elements.

*Thank you Kevin Powell ❤️*

[mudyeet_]

woah didn't realise that was 17 mins of greatness, went fast. I actually always had problems using font awesome, but I probably won't anymore.

[aldeen]

This dude should change name of his channel to the prince of CSS

[yadneshkhode]

Awesome top notch content .. my brother had taught me this ... never ever seen anyone teaching such top quality stuff anywhere Thank you sir for this

[sanghvian]

You won't believe it but I have actually been looking this up since 2-3 days and not received any ans nearly as satisfactory as this one. Thanks a lot Kevin

[castlemoyle]

Love the out takes.... Made a very interesting and useful video even better!

[lawrencepsteele]

Perfect timing. I'm looking at options for displaying text glyphs. This morning I'd looked at using SVG but this might be a better approach.

[briancross]

Great outtake! Fantastic info in the video too as always!!

[brucebenjaminthomas]

I'll have to watch this video a few more times as I failed to understand the benefit. Just seemed like A LOT more work, but I obviously just failed to understand what the benefit would be. And, as for using <i>, I simply changed that to <span> when I first started using these years ago as the use of <i> always seemed odd to me.

[LorenHelgeson]

This is how I have been using Font Awesome exclusively for the past three years. It's such a handy option.

[MM-vrrj]

Wow thanks for this tip Kevin!
Never knew you could get font awesome icons via the content property.

[germanbaena]

Great, thanks for the tutorial, you saved me; I send you a hug from Bogotá - Colombia!

[MartinKatscan]

Brilliant!
Great to see it's not just me.

This has always been my favourite way of using icon fonts.
It's even more powerful with SASS too!

I set up the @fontface for the font I want to use (usually fontawsome, but sometimes a custom font I create in icon moon app), then create a main, large mixin for most of the styles apart from the actual icon glyph code itself.

Then create a series of mini mixins for each specific icon.
i.e

@mixin icon--info {
@include my-main-mixin;
&::before {
content: '\f05a'
}
}

So then in the flow of the main styles, I can just call:
.my-class {
@include icon-info;
}

You can also just miss out the smaller mixins and just include the main mixin and specify the icon on a case by case basis if you wish.
To expand this, it can be made more flexible by adding variable (attributes) and SASS 'if else' functions to your main mixin for things such as whether it's a ::before or ::after icon, an amount of margin, font size override etc, etc...

[Gsc]

Thanks kevin! you're such a great mentor

[noclistify]

Great demo of using icons with pseudo elements, I've used Font Awesome for years using the <i> elements with .fa classes, great to understand an alternative method of doing this! Thanks for the content, Kevin!

[jennifermagpantay]

Life-saver tips! As always! Thanks, Kevin!

[jacobchristensen]

Thanks for yet another great video. Shawn does a fantastic lazy dog impression :-)