Setting up Font Awesome icons as pseudo-elements

Подписаться 928 тыс.

Просмотров 66 тыс.

50% 1

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 RU-vid 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!

Опубликовано:

28 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 117

@KevinPowell 3 года назад

The first 1000 people who click the link will get 2 free months of Skillshare Premium: skl.sh/kevinpowell0920

@pyrobasplas 3 года назад

Can't wait for your CSS Demystified, already pre ordered it!

@fatjay9402 3 года назад

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 !

@KevinPowell 3 года назад

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.

@KevinPowell 3 года назад

Yay! I'm excited for it as well!

@fatjay9402 3 года назад

@@KevinPowell that is sad to hear.. :( since your Tutorials are really great.. But thanks for the info!

@aldeen9190 3 года назад

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

@vishallondhe7298 3 года назад

more like emperor..

@matt4122 3 года назад

12:54 messed with my head at first

@KevinPowell 3 года назад

Hahah, what did I do there?!? Lol. Sorry about that!

@Beraksekebon21 3 года назад

lol editing bug

@ss4717 3 года назад

me 2...... lol

@crawfordvining4208 3 года назад

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!

@yadneshkhode3091 3 года назад

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

@mudyeet_ 3 года назад

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.

@sanghvian 3 года назад

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 !!!!!!

@waelpilote 3 года назад

This was really interesting, never thought that font awesome icons could be setup as pseudo-elements. *Thank you Kevin Powell ❤️*

@damianminds 3 года назад

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 -

@Victor_Marius 3 года назад

@@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

@lawrencepsteele 3 года назад

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.

@harishst202 3 года назад

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!

@ayshasahani6582 2 года назад

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.

@dregavero 3 года назад

Very nice tutorial, I was looking for something like this lately. Thank you! 👏

@jennifermagpantay7933 3 года назад

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

@castlemoyle 3 года назад

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

@KevinPowell 3 года назад

Haha, glad you liked it 😊

@briancross4415 3 года назад

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

@MM-vr8rj 3 года назад

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

@amyp.575 3 года назад

Awesome, as always! Thank you!

@LorenHelgeson 3 года назад

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

@germanbaena6579 2 года назад

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

@amoozesh3657 2 года назад

extremely useful thanks 💖

@Gs0c 3 года назад

Thanks kevin! you're such a great mentor

@noclistify 3 года назад

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!

@MartinKatscan 3 года назад

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...

@tkot7857 Год назад

thank you sir ... this video was really helpful

@AmandaLucaseu 3 года назад

Great video Kevin thanks 🙏🏻

@jacobchristensen7432 2 года назад

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

@ayushp5882 3 года назад

Woahh ! There is so much for me to learn! Gr88 content.

@ddrweb_ 3 года назад

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.

@foljs5858 3 года назад

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?

@manjunathk6550 3 года назад

You do the css topics very good. I hope if you cover Chrome Dev tools it would be awesome.

@toufiqrahman4927 3 года назад

New follower from Traversy Media :)

3 года назад

Thank you! I've suffer a lot because those empty elements kind of make funny things with mouse events

@hassaneoutouaya 2 года назад

THANK YOU SO MUCH!

@CJ-nz5rt 3 года назад

your videos are what helping me skill up. Thank you so much for all these

@vagglord3156 3 года назад

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.

@victorcleftune7344 2 года назад

To be honest, Kevin is a legend!

@robdorn420 3 года назад

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?

@ratkajecsven1928 2 года назад

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

@brucebenjaminthomas 3 года назад

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.

@infosandfacts7536 3 года назад

What an awesome ending. LOL😂

@ManoToor 3 года назад

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

@ikeohachidi 3 года назад

The circle cut out reminds me of Travis Neilsen. Great video

@KevinPowell 3 года назад

Glad you enjoyed it! And Travis was a big influence 😊

@gadritv8547 2 года назад

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.

@dogpaws7312 3 года назад

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?

@daveskye 3 года назад

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)

@xapollox127 3 года назад

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!

@fuseteam 3 года назад

btw since fa-user is psuedo class would class="viewer icon fa-user" work?

@fredhair 3 года назад

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.

@sjsstrng4042 3 года назад

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 🙏

@BeEmpathic Год назад

I love you videos they are really useful. 12:54 this suppose to be there? A little not in time.

@TheRavageFang 3 года назад

How would you change it to be a component by still using pseudo?

@bahaajasim3793 2 года назад

Thank you for the video, I tried to use FA icons like this but it didn't work with me

@delulu6969 3 года назад

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.

@hirenrathod9817 2 года назад

thanks

@groovebird812 3 года назад

Hi..a have a question. Is it better to use icon fonts or should we use svg if possible?

@petropzqi 3 года назад

Could you not extend the base class icon on the viewers to achieve the same result but with one less class in the markup

@TheTatsin 3 года назад

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?

@brucebenjaminthomas 3 года назад

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?

@alternativelygarth 3 года назад

What about SVG icons? Could you update this video to include using a kit with svg icons. Your video is great, thanks.

@bluesdog88 2 года назад

Does anyone know what VS Code theme Kevin is using?

@darkseid_x5 3 года назад

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?

@nielslytzdk 3 года назад

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..

@maiklem 3 года назад

Please do a JavaScript intro tutorial!

@eliseenlaura 3 года назад

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.

@KevinPowell 3 года назад

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?

@eliseenlaura 3 года назад

@@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!

@KevinPowell 3 года назад

@@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

@crousdioll 3 года назад

Your brain works a thousand per second, that's cool, Thank you Kev, I tried this method many times ...

@Lopeziraburu 3 года назад

Best ending

@pregoadisaputro 3 года назад

Where you find this example website like that PopDog site?

@KevinPowell 3 года назад

Someone recommended this one to me :)

@pregoadisaputro 3 года назад

@@KevinPowell oh ok

@whatthefunction9140 2 года назад

Teach us how to do this with our own svg

@damianminds 3 года назад

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.

@codzymajor 3 года назад

Hi Sean!

@sadamhussain9176 3 года назад

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

@jamesawilson3891 3 года назад

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.

@eli007s 3 года назад

What the bojangles was going on at 12:55? 📺👀

@MaheshKumar-lq1xm 3 года назад

Good content.. very helpful... Am actually changing the way after seeing this. But Every video of yours ~ 17 mins...why !!!!

@stevehunt525 3 года назад

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.

@shaunbowen 3 года назад

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.

@PAPAYA2K12 3 года назад

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.