![]() You can now paste the text into the ‘CSS Classes’ field. Simply copy the text inside the quotes, then switch back to the WordPress dashboard. For example, in the following image, the CSS class is fa-solid fa-address-book. The CSS class is simply the text between the quotation marks. In 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. Made by guys who care about delivering a neat experience, because they eat their own dog food.Do you want to add icon fonts to your WordPress site? Let us know what they are on our GitHub tracker. People designing video games or enthusiasts crafting board games have different constraints and needs. Easy styling thanks to SVGĪll the images are downloadable in a vector format, so you can easily tweak colors, rotation, adjust effects like blur, bevels or shadows and add badges.Īnother direct benefit is infinite scaling with low memory, it means no size limit for the resulting files which can be used for high resolution interfaces, retina display, logos, stencils etc. Stay up to date by following the project on twitter or just fetching the RSS feed. About the project An ever growing collection of free game iconsĭozen new symbols are added weekly and organized in intuitive categories to offer both a comfy browsing and let room for serendipity.
0 Comments
Leave a Reply. |