How To Add WordPress Menu Icons - Font Awesome 5
ฝัง
- เผยแพร่เมื่อ 18 ต.ค. 2024
- Learn How To Add WordPress Menu Icons with Font Awesome 5!
If you're looking for an easy guide to using Font Awesome 5 and Add WordPress Menu Icons, then this beginners guide will show you 2 simple methods.
If you use the OceanWP theme, you can easily add WordPress Menu Icons directly to your menu structure. If you're using a different theme, then don't worry, I've got you covered there too.
2:34 - The Non-OceanWP metho
Learn how to add and style your menu icons with ease in this complete guide!
Font Awesome 5 WordPress plugin: bit.ly/2qtEfh0
OCEANWP: bit.ly/2fRHBr0
AFFILIATE DOWNLOADS
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
CartFlows Pro: bit.ly/2KuxhCm
GeneratePress Premium: bit.ly/2Ydn1SE
Crocoblock: bit.ly/2BD7e6E
Brizy Pro: bit.ly/2Ji97r8
ELEMENTOR PRO: jo.my/1s0t2s2
WPBakery Page Builder (Formerly VISUAL COMPOSER): bit.ly/2NVbVNP
DIVI 3 Page Builder: bit.ly/2HiiDcE
DIVI Theme: bit.ly/2G8JMiA
SMART SLIDER 3: bit.ly/2G0G1vB
Astra Pro: bit.ly/2zruoKn
CSSHERO: bit.ly/2qbrRl6
SLIDER REVOLUTION 5 - bit.ly/2NYr8NV
IMPREZA THEME: bit.ly/2mpK9wp
SUBSCRIBE
bit.ly/2rX7rhu
LETS CONNECT:
/ wptutz
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk
Need an easy way to To Add WordPress Menu Icons with Font Awesome 5? Sure, here's exactly how to do it...
We connecting on another level. What do you think of this experiment with icon menus yasiensarlie.com/portfolio/aj5d/
Paul, instead of pasting only the class name from FA website into the WP menu class field, you can also just copy and paste the entire html markup ( part inside the name field where you put home and it will also render the icon with no changes to the font, no fixing that with another custom CSS.
And, it also gives you the opportunity to set the icon in front of the name or last or anything in between and get more creative.
You can indeed.. It didn't even cross my mind to do it that way.. lol
@@WPTuts I do this already for years, even with FA4 haha.
If the theme doesn't support FA out of the box, just load in the FA script in the header and than you can have FA icons where ever you want by simply copy/paste the html tag from FA website.
If the theme does support FA out of the box, all you need is the html tag and you can rock & roll.
Thx Paul, it seems icons is the way to go these days.
They do make it easy to quickly convey a message or information and can certainly help with potential language barriers. 👍
@@WPTuts Great point!
Great tutorial Paul 💪
Another great tutorial. Thanks Paul.
Nice & informative Video !!!
Thank you for your helpful video and the straightforward approach you use in delivering the advice. I've been using the Sydney theme and a recent update changed some functionality (such as footer copyright etc which I used to change after every previous update by replacing text in the footer code). Coincidentally the last update also mentioned that I needed to update from Font Awesome 4 to Font Awesome 5. That was a bit of a pain as , once updated it wasnt as simply as choosing a clicking the icon from the cheatsheet list and pasting it the service icon box in the editor. For example, I had to type "fas fa-" in front of book-open. I got there in the end but was not as straight forward as it said it would be. Also, the Sydney theme update changed the font of my menu and my header slider text and I'm not sure how to change it back. thanks again .
thanks, may i know how to shift the icon to RIGHT side? Menu [icon]
Nice video Thank you. But if you wanted an icon to only appear beside a menu label when on hover or on its selected state, can that be added? Is there a plugin for that Paul?
Thanks Paul!
Can i change the icon and menu colour on hover at the same time.?
great tutorial and BTW I have the same GROOT figurine, so cute
That's cos all the cool kids have a Groot.. 🤣
Hi and thank you for the great video. My website was build by web developers using WordPress. They didn't use the Wordpress themes but created custom modules, some of which have icons. Do you know by any chance how I can add FontAwesome icons to these custom made modules? I would like to be able to modify/add/edit them to change the existing ones ore add new ones. Thanks!
Nice.
Hows about if we had the icons uploaded to media library, getting them into the menu?
Cheerzzzz Paul.
Copy the URL and pop it into the menu item name field. Should work just fine. 🤘
Is it possible to do this dynamically with images?
Hi, I have the Oceawp them, but I don't know why my changes aren't saved. I've tried for several times with no success. Every time push the bottom "save changes" the icons disapear. It is really frustrating.
thanks helped alot but you forgot how to make icon only to appear in the menu without the text
My experience of using menu icons is that they don’t display on iOS. Is that still the case?
Hello