![\"Icon](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/10\/cloud-search.png\")
Instead of spending half your week monkeying around with different image sizes and re-uploading files, you can concentrate on making intelligent design decisions within a core set of flexible\u00a0options.<\/p>\n
Icon fonts are usually used for two basic functions: to enhance text, and to stand alone for functional or informational\u00a0purposes.<\/strong>\n\n\n\n\n<\/div>\n Using icon fonts can add an instant additional layer of visual polish to your sites.<\/p>\n Here are just a few of the cool things you\u2019ll be able to do once you have your icon fonts in place:<\/p>\n All of this is accomplished by a combination of the inherent format of icon fonts and a sprinkling of CSS goodness. Sounds like a good deal, right?<\/p>\n Perform a simple Google search for \u201cicon fonts\u201d and you’ll likely be bamboozled by the slew of options that pop up. To give you a head start on getting sorted, start your search with our hand-picked mix of free and premium icon font providers:<\/p>\n Take a trip to IcoMoon<\/a> and you can grab a set of general purpose icons or high-quality line icons for free, or treat yourself to one of their premium options.<\/p>\n There’s also an\u00a0intuitive\u00a0app <\/a>that makes it incredibly easy to generate and download\u00a0custom icons.<\/p>\n Originally designed for use with\u00a0Bootstrap<\/a>, this solid set of over 500 scalable vector icons is free for commercial use and can be styled any which way with CSS.<\/p>\n Font Awesome\u2019s<\/a> icons are also designed to look stunning on Retina Displays and not trip up screen readers.<\/p>\n Zurb<\/a>\u00a0provides its own free-to-use icon set<\/a>, which contains a decent collection of general, social, and accessibility icons.<\/p>\n They\u2019ve been coded to be highly accessible and require just a bit of CSS and the right markup to start using right away.<\/p>\n Fontello<\/a> is a great little tool that you can use to quickly select a custom pack of vector images you want to download.<\/p>\n Simply drag and drop all of your selected icons onto Fontello. Once they are uploaded, it will appear in the Custom Icons section.<\/p>\n With more than 9,000 icons available, Fontastic<\/a> enables you to create your own icon fonts in just a few seconds. You can eve publish your icons as SVG Sprites.<\/p>\n You can publish with just one click and every change you make instantly syncs with their servers. Too easy.<\/p>\n Pictos<\/a> is one to consider if you\u2019re prepared to shell out for a set of very nice looking, high quality icon fonts.<\/p>\n Each purchase includes source files in a variety of common formats such as AI, EPS, SVG and Sketch to make further customization a breeze.<\/p>\n Most of the sites above provide their own instructions, tutorials, and FAQ sections to help you get up and running with their icon fonts. The steps required to implement will vary in terms of complexity from provider to provider.<\/p>\n To keep things simple (and provide you with a fast, easy, code-free option for your site) we’ll be using the free\u00a0WP SVG Icons plugin<\/a>\u00a0to illustrate some of our installation tips below.<\/p>\n This plugin gives you access to over 490 icons that you can easily insert anywhere on your site using shortcodes.<\/p>\n ZQSrZvKDtQ0<\/span><\/span><\/p>\n You can even use the plugin’s import function to pull in custom icons from other sources such as IcoMoon.<\/p>\n After you\u2019ve downloaded and installed WP SVG Icons, a new tab will appear near the bottom of your admin menu labeled WP SVG Icons<\/strong>. When you roll your mouse over it, four more tabs will appear:<\/p>\n The WP SVG Icons plugin makes it ridiculously easy for you to insert an icon into your posts or pages. But before you do that, make sure you\u2019ve clicked your cursor in the right area of the editor where you want your icon to show up \u2013 in between two paragraphs or beside a subheading, for example.<\/p>\n If you’re on a post or page edit screen, simply\u00a0look for the new button just above the visual\/text editor that\u2019s labeled Add Icon<\/strong>.<\/p>\n Once you\u2019ve clicked it, a window will open that shows you the same options you find under the Default Icon Set<\/strong> tab. This just makes it easier for inserting icon shortcodes directly into your posts or pages, without having to navigate away from the editor and copy and paste shortcodes every time.<\/p>\n Scroll through the 490+ icons and select the one you want to insert. Using the element buttons at the top, you can choose whether you\u2019d like your icon wrapped with Your shortcode will be generated and inserted into your post or page as soon as you click the blue Insert Icon<\/strong> button. It will show as a shortcode in the editor, but you can see what your icon looks like on your post or page by saving it as a draft and pressing the Preview<\/strong> button.<\/p>\n Since the WP SVG Icons plugin generates shortcodes for all icons, you can simply copy and paste them into any area of your site that supports HTML \u2013\u00a0including your widgets. It\u2019s a great way to style up your sidebars and footers with more than just text.<\/p>\n For example, you can navigate to Appearance > Widgets<\/strong> and drag the Text<\/strong> widget into your sidebar or footer. Using the\u00a0Default Icon Set<\/strong> tab to generate your icon shortcode, paste it into the content area along with any other HTML you want to include. Hit “save” and the icon will be live on your site.<\/p>\n IcoMoon<\/a> is one of the best places to look for free icon fonts, and the WP SVG Icon plugin has an import feature that enables users take advantage of it. While the default set of icons that comes with the plugin is great, you may want some of your icons to look a bit different and IcoMoon is perfect for that.<\/p>\n To start, visit the IcoMoon library<\/a>\u00a0through its app and browse through the collections of icon fonts available. Some will require a purchase, but the ones that are free will have an +Add<\/strong> button below them. When you\u2019ve found one you like, click +Add<\/strong>.<\/p>\n You\u2019ll then be shown all the icons contained in that collection. Now you’re free to select the ones you want. Click on individual icons if you just want a few, or use your shift key to select lines of multiple icons all at once.<\/p>\n Click Generate Font<\/strong> at the bottom of the screen when you\u2019re happy with your selection. From here, you have the option to customize some settings \u2013 naming your font something specific,\u00a0or changing its class prefix \u2013 by clicking on the\u00a0Preferences<\/strong> button at the top of the screen.<\/p>\n Click the Download<\/strong> button at the bottom of the screen when you\u2019re all done and your fonts will arrive as a ZIP file.<\/p>\n Now you can go back to your WordPress admin area and navigate to WP SVG Icons > Custom Icon Set<\/strong>. Click the Choose file<\/strong> button to select the ZIP file from your Downloads folder and then click the Import<\/strong> button.<\/p>\n If the import is successful, you\u2019ll be able to see all of your new icons listed on the page. Now when you click the Add Icon<\/strong> button to insert icons on any posts or pages, you\u2019ll see a new Custom Pack<\/strong> tab beside the Default Pack<\/strong> tab that you can switch over to for selecting and inserting your custom icons.<\/p>\n Keep in mind that only one custom icon pack can be used at a time. If you\u2019d like to add or remove icons from your custom pack, you\u2019ll have to navigate back to the Custom Icon Set<\/strong> tab and click Uninstall Pack<\/strong> to remove everything. After that, you can return to IcoMoon to select the new icons you want, download the ZIP file, and import them.<\/p>\n If you uninstall a custom icon pack but still see them appearing in WordPress, you may need to clear your web browser\u2019s cache.<\/p>\n At this point, you may be wondering how to use all the other great customization options with this plugin that were listed at the beginning of the article \u2013 like changing the color of your icons, adding shadows, or even applying animation effects.<\/p>\n Unfortunately, these options aren\u2019t available with the free version of the WP SVG Icons plugin. But the upgrade to premium<\/a> is well worth it.<\/p>\n With the premium version, a new Advanced Attributes<\/strong> button will appear in your icon editor when you click Add Icon<\/strong> on a post or page.<\/p>\n You\u2019ll get to easily adjust the icon size, add a hyperlink to it, and set it to repeat a certain number of times. You can also give it beautiful CSS3 animation effects, set the animation to correspond to a specific event, add class names, adjust its color, and rotate it.<\/p>\n When you navigate to Appearance > Menus<\/strong>, you\u2019ll be able to expand each menu page to find a custom menu icon drop-down menu that\u2019s offered through the premium version of this plugin. It will be set to no icon<\/strong> by default, but you can use the drop-down menu to select the icon of your choice to add a little extra visual appeal to your menu links.<\/p>\n In addition to more customization options and menu icon insertion, the premium version also enables you to use an unlimited number of custom icons, generate icon containers for use on your landing pages, and take advantage of built-in widget support for all icons.<\/p>\n You even get\u00a0premium support for any problems or advice you may need on how to achieve a very specific customized look.<\/p>\n While the free plugin offers great basic options for fast and easy icon font insertion, the premium version really enables you\u00a0to take it to the next level. At just $29<\/a>, it\u2019s quite affordable if you just have one WordPress site, and \u00a0developer and business licenses are available for use on multiple sites.<\/p>\n Icon fonts are a great way of adding extra visual polish to your sites without slowing down load times, forcing you to create Retina-specific images or having to worry about image scaling issues.<\/p>\n Fortunately, there are also several high-quality sources of free font icon packs available online such as IcoMoon and Font Awesome.<\/p>\n For users who really want to set up icons on their sites\u00a0as quickly and seamlessly as possible, without having to dabble with code, using the free\u00a0WP SVG Icons plugin<\/a>\u00a0is pretty much a no-brainer. If you want to kick things up a level, the premium version of the plugin is well-worth exploring.<\/p>\n If you want some further reading on using icons, check out Adding Social Media icons to WordPress with CSS Sprites<\/a>, and if you want to read up on fonts,\u00a0have a read through\u00a0How to Find, Choose and Install Beautiful Fonts on Your WordPress Website (With Examples)<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":" Images are great and all, but they offer up challenges for websites: they require extra HTTP requests, they add file weight, and they don\u2019t scale well. Icon fonts, on the other hand, need just one HTTP request for any size set of icons, look great on any display or resolution, and you can scale the c!@# out of them.<\/p>\n","protected":false},"author":37930,"featured_media":147872,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263],"tags":[10284,10286,973],"tutorials_categories":[],"class_list":["post-147521","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-icomoon","tag-wp-svg-icons","tag-fonts"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/147521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/37930"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=147521"}],"version-history":[{"count":19,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/147521\/revisions"}],"predecessor-version":[{"id":207130,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/147521\/revisions\/207130"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/147872"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=147521"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=147521"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=147521"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=147521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
![\"Icon](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/10\/font-awesome.png\")
<\/p>\nWhere to Find Icon Fonts<\/h2>\n
IcoMoon<\/h3>\n
![\"Custom](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/10\/icomoon.jpg\")
Font Awesome<\/h3>\n
![\"The](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/10\/font-awesome.jpg\")
Foundation Icon Fonts 2<\/h3>\n
![\"According](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/10\/zurb.jpg\")
Fontello<\/h3>\n
![\"Fontello](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/10\/fontello.jpg\")
Fontastic<\/h3>\n
![\"Create](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/10\/fontastic.jpg\")
Pictos<\/h3>\n
![\"Carefully](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/10\/pictos.jpg\")
Using the WP SVG Icons Plugin<\/h2>\n
What You Get With the WP SVG Icons Plugin<\/h2>\n
\n
Embedding Icon Fonts into Your Posts and Pages<\/h2>\n
![\"Add](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/10\/Add-Icon-Button.png\"){kind=icon}
<\/div>\n![\"WP](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/10\/WP-SVG-icons.png\"){kind=icon}
<\/div>\nh1<\/code>, h2<\/code>, h3<\/code>, span<\/code>, div<\/code>, i<\/code>, or b<\/code> tags. Note that the plugin will only allow you to choose one element at a time.<\/p>\nEmbedding Icon Fonts into Your Widgetized Areas<\/h2>\n
Importing a Custom Icon Pack from IcoMoon<\/h2>\n
![\"IcoMoon](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/10\/IcoMoon-Custom-Icon-Fonts.png\"){kind=icon}
<\/div>\n![\"WP](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/10\/WP-SVG-icons-custom-pack.png\"){kind=icon}
<\/div>\nWhy You\u2019ll Probably Want to Upgrade to Premium<\/h2>\n
![\"WP](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/10\/WP-SVG-icons-premium.png\"){kind=icon}
Wrapping Up<\/h2>\n