5/18/2023 0 Comments Download flaticon fontIn the popup, you’ll see an HTML code snippet. If you want, then you can change the icon’s style by clicking on the different settings. To get an icon’s CSS class, simply find the icon font on the Font Awesome website and give it a click. You should now see a new ‘CSS Classes’ field. With that done, simply click to expand the menu item where you want to show the icon. Then, click on ‘Screen Options’ and check the box next to ‘CSS Classes.’ To add an icon, either create a new menu or open an existing menu in the WordPress dashboard.įor step-by-step instructions, check out our beginner’s guide on how to add a navigation menu in WordPress. Many websites use icon fonts in their menus, to help visitors find their way around. You can even add the icon shortcode to columns and create beautiful feature boxes.įor detailed instructions, see our guide on how to add feature boxes with icons in WordPress. WordPress will turn the shortcode into a Font Awesome icon for visitors and show it alongside your text.Īnother option is to add the shortcode to any widget-ready area.įor example, you can add a Shortcode block to your site’s sidebar or similar section.įor more information, please see our guide on how to use shortcodes in your WordPress sidebar widgets. For example, you can change the font size. You can then use the settings in the right-hand menu to customize the icon, similar to how you customize options for text blocks. To do this, simply paste the shortcode inside any Paragraph block. For example, you may need to display a ‘copyright’ symbol after a brand name. ![]() Sometimes you may want to show an icon font inside a block of text. You can now click on ‘Publish’ or ‘Update’ to make the icon font live. With that done, simply paste the name into the shortcode. In the popup that appears, go ahead and click on the icon’s name.įont Awesome will now copy the name to your clipboard automatically. To get this name, head over to the Font Awesome site and click on the icon that you want to use. Simply replace “rocket” with the name of the icon that you want to show. Simply use the quick links to jump straight to the method that you want to use. With that said, let’s look at how you can easily add icon fonts in your WordPress theme. We use it on WPBeginner, and in all our premium WordPress plugins. In this guide, we’ll be using Font Awesome as it is the most popular open-source icon set. These are the icons you can see in the WordPress admin area. In fact, the WordPress software comes with free dashicon icons built-in. There are several open-source icon font sets that you can use for free such as IcoMoon, Genericons, and Linearicons. These pictures can also help you create a multilingual WordPress website, since most people can understand icon fonts no matter what language they speak.Ĭompared to image-based icons, font icons load much more quickly so they can boost WordPress speed and performance. In this way, you can help visitors find their way around your website and engage with your content. Most visitors will immediately understand what a commonly-used icon means. For example, you can use them with your shopping cart, download buttons, feature boxes, giveaway contests, and even in WordPress navigation menus. ![]() You can use these icon fonts to show common images. Icon fonts contain symbols or small pictures instead of letters and numbers. What are Icon Fonts and Why You Should Use Them? In this article, we will show you how to easily add icon fonts in your WordPress theme. You can even style them using CSS to get exactly the look you want. Icon fonts allow you to add resizable vector icons that are loaded like web fonts, so they don’t slow down your website. It’s worth highlighting that Flaticon has a free Photoshop plugin which will help you find and use icons without needing to leave the Photoshop workspace.Do you want to add icon fonts to your WordPress site? This site is an excellent vector icons search engine. Iconmelon has plenty of icons in SVG format, which makes this site a great bookmark-worthy resource for web/UI designers. You can pick and choose just the icons you need, and when you’re done, it’ll combine them into one font file. The site displays the icons of popular icon fonts like Font Awesome, Iconic, Brandico, etc. ![]() Fontelloįontello is a wonderful resource for web/UI designers looking for free web icon fonts. The icons are organized well in groups like “Business” and “Interface”. ![]() Iconmonstr has hundreds of free font icons available in PNG or SVG format. Note that Iconfinder also displays icons that aren’t free, but you can use the site’s “Free” filter to limit your search results. What makes Iconfinder particularly noteworthy is it allows you to download just the individual icons in a set that you need. Here are five sites that will help you discover free icon fonts to download.
0 Comments
Leave a Reply. |