Setting up Font Awesome icons as pseudo-elements
ฝัง
- เผยแพร่เมื่อ 4 ส.ค. 2024
- The first 1000 people who click the link will get 2 free months of Skillshare Premium: skl.sh/kevinpowell0920
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.
The previous video: • Animated card with HTM...
The pulsing animation: • Create a pulsing anima...
The code for this project: github.com/kevin-powell/popdo...
This video was sponsored by Skillshare
#CSS #popdogclone
--
Come hang out with other dev's in my Discord Community
💬 / discord
---
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 TH-cam channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
The first 1000 people who click the link will get 2 free months of Skillshare Premium: skl.sh/kevinpowell0920
Can't wait for your CSS Demystified, already pre ordered it!
Hi i ask this many times :( .. but can you make maybe a video that you use this things but show how to add them in elementor ?.. :( i know its a page builder.. but they are so many people using it... i think you would get vaule out of it !
I know a lot of people use Element or, but it's really not something I know, and the little I have played with it, it isn't my cup of tea at all.
Yay! I'm excited for it as well!
@@KevinPowell that is sad to hear.. :( since your Tutorials are really great.. But thanks for the info!
This dude should change name of his channel to the prince of CSS
more like emperor..
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!
12:54 messed with my head at first
Hahah, what did I do there?!? Lol. Sorry about that!
lol editing bug
me 2...... lol
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 !!!!!!
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
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!
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.
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.
Great outtake! Fantastic info in the video too as always!!
This was really interesting, never thought that font awesome icons could be setup as pseudo-elements.
*Thank you Kevin Powell ❤️*
Actually Font Awesome icons are BY DEFAULT set as a pseudoelements, you just wrap icon classes into tag but you can add FA classes to any element and it will work the same - the video tutorial in unnecessary complicated. You just can create div -
@@damianminds you are right. Check out icomoon.io/app/#/select, you can create your own fonts and with ligatures your just add a class to your element and inside just write normal text which is translated to an icon. Ex: viewers. But I usually use class prefixing: ui-icon-viewers
Life-saver tips! As always! Thanks, Kevin!
Very nice tutorial, I was looking for something like this lately. Thank you! 👏
Awesome, as always! Thank you!
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.
Wow thanks for this tip Kevin!
Never knew you could get font awesome icons via the content property.
Great, thanks for the tutorial, you saved me; I send you a hug from Bogotá - Colombia!
Love the out takes.... Made a very interesting and useful video even better!
Haha, glad you liked it 😊
extremely useful
thanks 💖
Thanks kevin! you're such a great mentor
Thanks for yet another great video. Shawn does a fantastic lazy dog impression :-)
Great demo of using icons with pseudo elements, I've used Font Awesome for years using the elements with .fa classes, great to understand an alternative method of doing this! Thanks for the content, Kevin!
thank you sir ... this video was really helpful
Great video Kevin thanks 🙏🏻
Woahh ! There is so much for me to learn! Gr88 content.
This is how I have been using Font Awesome exclusively for the past three years. It's such a handy option.
THANK YOU SO MUCH!
New follower from Traversy Media :)
Hello Kevin, been liking this channel for a while. Haven't seen if you did, but if not, could you do a vlog on images -- specifically how to work with ensuring aspect ratios, tricks for when dealing with layout with user provided non-predictable size images (e.g. through a CMS), background-cover and so on?
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...
You are the foking best brooh... You made me solve in minutes something that I tried for hours. Thank, Thanks and Thank I gift you my Like.
You do the css topics very good. I hope if you cover Chrome Dev tools it would be awesome.
your videos are what helping me skill up. Thank you so much for all these
Can you explain how to do this using the fontawesome SVG icons? I've always used fontawesome with psuedo elements but since I made the move to svg icons I haven't been able to figure it out, thanks!
So i'm loading a full library of icons with css classes and I write my own css for the icon, this approach is very uselfull when working with cms;s where you can't actually control the markup etc . In vue fontwesome you can actually import only what you use and insteaf of an empty element you will have a svg element.
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 simply changed that to when I first started using these years ago as the use of always seemed odd to me.
btw since fa-user is psuedo class would class="viewer icon fa-user" work?
To be honest, Kevin is a legend!
Sorry if this is a redundant question: I love this idea of pseudo elements. However, what do you do if you want the icons to be fixed-width? I tried doing the fa-fw in the class area with the method above, but it affects the entire element. Is there a way to do fixed width to the icons only?
What an awesome ending. LOL😂
Is there a way you could put the Unicode in an html data attribute and access it in the css?
Edit: use the attr() function in the icon::before's content. I call my attribute something like icon-code and then I only need 2 generic classes in my css; one each for prepending or appending an icon.
Thank you! I've suffer a lot because those empty elements kind of make funny things with mouse events
The circle cut out reminds me of Travis Neilsen. Great video
Glad you enjoyed it! And Travis was a big influence 😊
Hi kevin! I'm a beginner of this web dev. Already learned html & css basics. Could you tell me where can i start your full tutorial video on css. Because i can't able to find it from scratch. There are lot of videos without ordered. So it would be nice if i you share where to start from your css video for beginners. Thanks 🙏
Thank you Kevin, another great video. Could you please make a video on the difference and the how and when of using height: 100% vs 100vh?
when u set up a parent of 500px height and set its child do 100% height, the child will be the 500px because the parent is 500px but if u set 100vh on the child then it will be 100% of your viewport (monitor) because vh stands for VIEWPORT HEIGHT, no matter the parent, unless u set overflow:hidden on parent
I usually use it as i element because i found it much easier. I knew for this pseudo trick too i use it for dynamic ico changing on checkbox check which is a great benefit.
Going one further you could set data to the unicode on the html tag that has class icon; then for the css just set the content to the data attribute
I was thinking, is it any better if I set the 'preset' FA properties in a CSS variable? I can just use it like :where(.viewers, .name)::before { @apply --fa-icon; }
So that I don't need an extra utility class for the icon to hunt down the HTML. I also have a single index where all the components/classes that have an icon before them.
Hi..a have a question. Is it better to use icon fonts or should we use svg if possible?
Does anyone know what VS Code theme Kevin is using?
Thank you Kevin for the tip, but is there a way to grab only some icons(what you need) and not the whole file from cdn like the way with css.gg?
Personally, it seems to me the best way would be to download the SVG for the ones you want, grab the code and save them to a file, and link to that file. I'm curious if anyone else might recommend that?
thanks
I love you videos they are really useful. 12:54 this suppose to be there? A little not in time.
What about SVG icons? Could you update this video to include using a kit with svg icons. Your video is great, thanks.
How would you change it to be a component by still using pseudo?
I have been using my own SVG icons as background images with pre set classes.
(I know how you feel, working from home with young kids)
Cool. But this method will load the entire webfont. Why not use these icons as svgs and conditionally load them? I've seen FA been flagged in lighthouse console. Do you think it's the best option?
Thank you for the video, I tried to use FA icons like this but it didn't work with me
Hey Kevin, Im currently working on a website that is focussed on the AA accessibility standards. Icon fonts are a big no no when it comes to using them as a pseudo element.. screenreaders read the text inside the content property.
Thanks, I wasn't aware of that issue! I was under the impression that screen readers ignored the content of pseudo-elements, and that it was really important not to include things they should see in there.
I was thinking that I should do a 4th video in this at the end to improve it's accessibility, as the icon here gives a visual clue as to the number, but that there should probably be a 'sr-only' text to give context to the numbers. How does a screen reader read the text if it is a pseudo-element? If it just skips it because it's an unknown character, would this approach still work? Or do you have an alternative suggestion?
@@KevinPowell I'm not an expert yet in accessibility but some screenreaders do read the content property. Also when people change their font in the browser because maybe they are dyslectic, the icon will become a square.
I'm using svg background images as icons. It is not the best solution, but works for now since I dont write the HTML myself. Otherwise I could have added an aria-hidden="true" to it..
Would be intresting to see an accessibilty video about this!
@@eliseenlaura thanks again 😊. Definitely one of my weaker points that I got to work on. I'd like to bring an expert on to interview, and also give me pointers for future content
Could you not extend the base class icon on the viewers to achieve the same result but with one less class in the markup
Your brain works a thousand per second, that's cool, Thank you Kev, I tried this method many times ...
Nice video :) My icon is not showing for some reason, only white space. I tried copy/pasting the code but it still doesn't work..
Where you find this example website like that PopDog site?
Someone recommended this one to me :)
@@KevinPowell oh ok
Please do a JavaScript intro tutorial!
Best ending
Hi Sean!
SMASHING the LIKE Button!!!!!
Great video, but the way you include icons as pseudo elements it is not the best practice. You should separate your elements classes from the icon classes. For example, Instead of classes ”name icon” (this tell you nothing about icon you used - in your video example it is the smile icon) it's better to make ”name icon icon-smile” and in ”icon-smile” include all the specific properties of used icon. In the video you put specific, unique properties into class ”name”, but think what if you want to include the same icon in 2 or 3 different places which looks the same, has the same size etc? You gonna repeat the CSS properties for this specific icon over and over. Look how Font Awesome authors created the ”i” tag solution. Check the font awesome CSS. It actually is the tag with the font as a pseudoelement! So THE ONLY THING YOU HAVE TO DO after including font awesome in the project is to copy fa icon classes to your element and then style it. It will save you A LOT unnecessary CSS, so the final element classes should look like this and that's it. Then you can style the icon in your CSS.
Teach us how to do this with our own svg
Video request... Kevin, long time viewer, new subscriber. I have a 'large' website for the genealogical community. 'Large' not in content or users but large in the amount of unique areas of content. The site is basically over 10 years old and I am in the process of 'modernizing' it. By that I mean, converting from Bootstrap 3 to Grid. All of the Grid videos I have viewed only deal with how to use Grid on 'A' page. On my site I have over 40 unique pages. Each of the pages have 3 things in common... Menu, Header, Footer. What I would like to see is a video that explains how best to 'structure' the site/pages to accommodate the multiple CSS Grid files. Thanks for all you do.
every time you save the browser refresh? how?
I'm using an extension called live server
@@KevinPowell thanks it help me well, I'm just a newbie in this stuffs
9:58 Can you tell me how did he remove those spaces
Shift+tab i think
Yup, shift+tab does it 😊
Good content.. very helpful...
Am actually changing the way after seeing this.
But Every video of yours ~ 17 mins...why !!!!
🤞❤️
Hola! Kevin. no te lo tomes a mal pero tu timbre de voz me produce un sueño. que lo utilizo para hacer la siesta. No se por que pero gracias. y no es coña.
What the bojangles was going on at 12:55? 📺👀
You can make a separate video for this than continuing the last session .
It's difficult to follow along .It's like a part 2 movie if we don't watch part one we can't understand some stuff here
Can you update this video please!
So instead of one line of html code for each icon, you replace it with 10 or so lines of css. It doesn't seem very efficient.
The best demonstration of why the method in the video is better, is when styling bulleted lists. I always replace the bullets in a standard UL list with a FontAwesome icon (as a pseudo ::before element on the LI part). This means you can still write lists really easily and you only need to add a single class to the UL. I usually go for a right-chevron or a check.
font awesome doesn't work for me anymore - it's just weird squares instead
I stopped using font awesome a few years ago.
Could you maybe combine this with css variables?
So you have:
.icon::before { content: var(--icon); }
.something { --icon: "\f802"; }
Yup! I'd probably include a fallback too, so var(--icon, "\f802"); and then you can overwrite it if you need a different icon in the same way.
@@KevinPowell I've always been hesitant to using fallbacks like that due to not really knowing where browser support for it is.
Has anyone else had problems with their Font Awesome pseudo elements showing up as squares instead of the correct icon???
Your Son looked Cute
SO HOW MANY OF YOU GUYS SAW THE BIT WITH HIS SON ?
To long to get to the point.
OMG stop talking about fucking skilshare