Webfonts work like any other file you might use to create the design of your document: simply upload the appropriate font files to your server, and then your web page can download them to make use of them however you see fit. In this article, I’ll show you how to use webfonts to replace image-based icons in your design to improve accessibility, scalability and “style-ability. These are infinitely scalable with no loss of fidelity. To create responsive designs with scalable icons, I recommend replacing bitmap image icons with vector-based webfonts. I think this why many designers and developers often avoid icons in their design, despite the fact that icons can be amazingly effective at communicating complex ideas in a limited space. At its intrinsic size, the icon looks fine, but enlarge it - even just a little - and the edges blur where they have been anti-aliased. Even worse, sprite-based icons can not be reliably or easily scaled. However, the more you scale these images up or down to respond to the context, the more the icon will appear distorted as the bitmap image’s anti-aliasing becomes increasingly apparent. Another common technique relies on a grid of the different icons and states - a CSS sprite - saved in a bitmap format, typically GIF or PNG. Generally, images are used to add the icon inline using the img tag. This minimizes the risk of breaking your theme and the changes will also be persistent throughout theme updates.One of the major problems we face in responsive design is how to create icons that scale to the interface, not just for physical dimensions, but based on screen size and number of pixels per inch. You can add the following to your functions.php file, or we recommend using a free plugin like Code Snippets. You’ll need to enqueue it on the front-end, but all you need is the name of the script, the file is already available to WordPress. Option 2 – Use the Built-in Dashiconsĭashicons is a set of font icons included by default since WordPress uses it on the backend. The above is a great solution if you want to let your clients add icons to posts or pages, but if you want to use these elements within your theme or plugin it’s best to enqueue them yourself (will dive into this further below). They have a premium icons add-on you can use. If you want a lot of easy to use shortcodes, you might want to also check out the Shortcodes Ultimate plugin. Pretty easy right? We had a Font Awesome icon up and running on our site within just a few minutes. Here is what it looks like on the front-end. For example, below we inserted the WordPress Font Awesome icon in a Gutenberg shortcode block and added fa-3x to make it three times bigger. You can check out Font Awesome 5’s basic use chart for additional ways to use and customize it, as well as their icon library. They even have a WordPress icon now! Pretty cool. After you install and activate it, all it takes is a simple shortcode code to insert an icon. The free Font Awesome Integration plugin contains the latest Font Awesome 5 icon library. The quickest way to get up and running with WordPress font icons is to simply use a third-party plugin. For that, we recommend skipping down to the section on the best method. Fair warning, not all of these are the best in terms of performance. Quick and Easy Ways to Use WordPress Font Iconsįirst we’ll dive into some of the quick and easy ways to use WordPress font icons. If you’re wanting to simply use SVG icons manually, you won’t find a better free library than iconmonstr or a better premium library than Iconfinder.If you’re looking for a super lightweight icon set, make sure to check out Bytesize. All 84 icons measure in at 9KB minified (2 KB in SVGZ, or Gzipped).Fontello is another great service that helps you discover and built icon fonts.In fact, we’ll be using their icon font generator tool further below. IcoMoon is another popular service with 5,500+ free vector icons and 4,000+ premium icons.It includes icons for just about everything, from interface, to social, arrows, and many other types of icons. As of writing this, it has 1,400+ free icons, as well as 4,500+ icons in their pro version. One of the most popular and widely used ones is Font Awesome. There are a lot of great places to now find icon fonts for your WordPress site. Just type “icon font” into Google will yield you some great results. Host Icon Fonts Locally (Only the Ones You Need).Performance Issue to Consider with Icon Fonts.We’ll show you in this article a couple different ways to use WordPress icon fonts, where to get them, and which method might be the best for your site.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |