Add Font Awesome Icons To WordPress Using A Plugin
ฝัง
- เผยแพร่เมื่อ 18 ต.ค. 2024
- Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: wplearninglab....
Add Font Awesome Icons To WordPress Using A Plugin • Add Font Awesome Icons...
Download your exclusive 10-Point WP Security Checklist: bit.ly/10point-...
Font Awesome Icons, also known as fa icons, are a quick and easy way to add simple pictures to your WordPress. There are nearly 700 different icons to choose from as of the recording of this tutorial. With a little searching you're bound to find the perfect icon. When you do, this is how you add to your WordPress site.
I recently showed you how to add Font Awesome to your site without a plugin.
Since then, many have asked how to do this using a plugin. So here it is: how to add Font Awesome to your WordPress site using a plugin.
The big perk of using the plugin is it always has the current library of icons. You need to manually update when not using the plugin.
I hope this information helps you! If you have any questions leave a comment below or ping me @WPLearningLab on Twitter.
--------------
If you want more excellent WordPress information check out our website where we post WordPress tutorials daily.
wplearninglab....
Connect with us:
WP Learning Lab Channel: www.youtube.com...
Facebook: / wplearninglab
Twitter: / wplearninglab
Google Plus: google.com/+Wpl...
Pinterest: / wplearninglab
FINALLY - Video tutorials even a non-professional can follow! THANK YOU THANK YOU THANK YOU!!!!
+Tn Homesteader You're welcome! I try to cater to techies and non-techies :) I glad it helped. Thanks for watching!
thank you very much , great videos, short to the point, great
+Mark Nasri Hi Mark, thanks for the feedback. I value short and to-the-point as well. Life is too short and there aren't enough hours in a day for rambling :)
Thank you for this video!
Good tips, thanks!
Oh yeah, I forgot how to turn links blue lol. They are red when I add them and using the color chart doesn't change the link color, just the other text.
You'll probably have to use custom CSS. Once you have the right class selected you can use the rule color:red; For example,
.selectedClass a {color:red;}
That will change the link (a) inside the selectedClass to red.
You can also change the "hover" color of the link like this:
.selectedClass a:hover {color:green;}
Hopefully I understood your question correct and hopefully that helps!
I want the links blue, they are automatically red lol. I'll give that a shot though.
I figured out how to do it through appearance. I went with a new theme that I like a lot better.
Thank you
Great video! but how do I add icon in a heading widget like Elementor? Ex font awesome icon Contact
Gracias!! Es lo que buscaba. Solo me ha faltado saber como cambiar el color y añadir una url para poder clicar en el icono. Alguien sabe como hacerlo?
Interesting video- I wanted to ask you a question . About 3:39 into the video a animated graphic comes up with a picture of yourself asking for thumbs up .. How were you able to accomplish this ?
Thanks very much for taking time to make these awesome vodeos 3 thumbs up in my book
Hi Yesi,
I used a green screen for the background. Then in my video edit software I used "chroma key" settings to take out the green background. It's the same technology as weather people on the news when they're standing infront of a map. I've a pretty basic video editing program, so you definitely don't need to do anything expensive to make it work.
I hope that helps and thanks for watching!
It doesn't work in the block editor of my WordPress.. I can't find the correct names of the icons.
The only thing I can find is the preset coffee cup ([icon name="coffee"]).
I have installed the plugin.
On the website of fontawesome, only the HTML code is included and not this code: [icon name="coffee"].
How to make it work?
How do I change the color of that icon ?
thanks very helpful
You're welcome Muhammad, thanks for watching!
Does anyone know how or if its' even possible to use your own custom created icons with font awesome. I'm using avada, and when I create something like a content box, the only icons I can assign to it are the Font Awesome ones, and I have been trying to find out how to use my own for almost a year now. I have tried plugins that allow you to upload your own, but they only give the shortcodes to use them, but the still do not show up when I try to select an icon for a content box or any other fusion element that allows you to simply select an icon for it's contents. Seriously, is it even possible. Every youtube video and google search result just shows you how to generally use font awesome or another plugin like I mentioned. There has to be a way to use your own and have them show up in the list. Please help if you can.
Hi Shul,
You can't add icons to Font Awesome and building your oen library may be too time consuming.
I haven't used Avada in a long time so I'm not sure if you can upload SVG images, which is format for most scalable icons.
If it does allow you upload SVG images, maybe that's the way to go. Upload them as needed.
@@wplearninglab Thanks for the response. I can upload svg, so I'll give that a shot like you suggested and see what I can do.
How to use FontAwesome Pro icons?
I am using WP and I have installed Better Font Awesome using the latest version option. However, some free icons work but some don’t work and don’t display.
For example:
• [icon name="upload"] = Works
• [icon name="coffee"] = works
• [icon name="screwdriver"] = doesn’t work
• [icon name="tools"] = doesn’t work
Is this a plugin issue or something I am doing?
Thanks,
Ron
Hi Ron,
If some of them work I would say it's not something you're doing wrong. You must have the plugin set up properly otherwise none of the icons would work.
I've never used that plugin, so I can't be of too much help.
It could be a plugin conflict causing the problem. I would first make sure all plugins, your theme and your WordPress core files are up-to-date. And then test the icons again.
If that doesn't help I would do a little research on Google to see if others have had/are having the same problem.
If that doesn't turn anything up I would try getting the icons a different way.
I hope that helps :) Let me know if you have any further questions. Thanks for watching!
How would you then set the menu image in Appearance | Add menu items, because the only option there is to upload
How to add font awesome icon in menu bar if we are using wpbakery
Hi, How can i add an icon to the footer instead?
Hi Anna,
Once the plugin is installed you can put the shortcode for icons anywhere. So if you find where the footer content is generated you should be able to put an icon shortcode in there.
I hope that helps and thanks for watching!
Can I use it in menu?
+Marcelo Anselmo Hi Marcelo, you should be able to. Just paste the embed code for the icon you like into the menu field. You can have just the icon or you can put text before or after the icon.
I hope that helps and thanks for watching!
Mine wont show in the menu section
This walkthrough should help. You can ignore the child theme part of you don't have a child theme. And you can add the CSS via Customizer or your theme options: premium.wpmudev.org/blog/add-icons-wordpress-menus/
Let me know how it goes!
?
It didn't go very well I guess?
It doesn't work when i add code in header .php
thanks x
You're welcome Cyril, thanks for watching!
It works perfect when editing the content of the pages, but when it comes to the content of the top header (my theme's feature) it doesn't. I used the same shortcode from my pages content and pasted it there but it only showed the shortcode itself instead of the icon it represents :(
Hi Rodrigo,
Are you adding the shortcode directly in the header.php file or in the theme options? Or somewhere else?
Hi! In the theme options, those that appear on the left side once you click on "Customize".
How to change the color?
Hi Marjan,
The safest way is through CSS. Every icon has a class name link this for example:
In your CSS you can create a rule like:
.fa-accessible-icon {
color:blue;
}
That will make the icon blue.
If you need more details on CSS and how to use it check out this CSS basics playlist on my other channel: th-cam.com/video/6QY_bOIisAc/w-d-xo.html
You may also want to watch this video to figure out where on your WordPress site you can insert CSS: 4 Places You Can Edit CSS In WordPress: th-cam.com/video/vLSUWT9MNlA/w-d-xo.html
I hope that helps and thanks for watching!
This is elon at his past time