{"id":1167,"date":"2020-02-21T12:22:34","date_gmt":"2020-02-21T12:22:34","guid":{"rendered":"http:\/\/leaguewp.com\/?p=1167"},"modified":"2020-02-21T12:22:34","modified_gmt":"2020-02-21T12:22:34","slug":"line-awesome-font-icons-genesis","status":"publish","type":"post","link":"https:\/\/leaguewp.com\/line-awesome-font-icons-genesis\/","title":{"rendered":"How to Use Line Awesome Font Icons in Genesis Themes"},"content":{"rendered":"

Icon fonts are an integral part of modern web design. They add value to web design by making your content visually more aesthetic and compelling. While there is a wide range of web icon fonts<\/a> to choose from, font awesome<\/a> is more popular these days.<\/p>\n

Font awesome offers five different types of icon fonts such as Solid, Regular, Light, Duotone and Brands. Some of these icon font types (Light, Duotone) look beautiful but they are only available to the Pro users.<\/p>\n

However, if you\u2019re looking for a leaner version of these standard icon fonts, you\u2019re in luck! Recently, Icon8 launched<\/a> its own version of Font Awesome which offers leaner icon fonts. They call it \u201cLine Awesome\u201d.<\/p>\n

Line Awesome is essentially an open-source alternative to Font Awesome which includes more than 1380 modern line icons that let you choose your icons, copy and paste the code wherever you need it.<\/p>\n

Why Use Line Awesome Font Icons?<\/h2>\n

Line Awesome font icons offer some compelling benefits over Font Awesome font icons:<\/p>\n

Great Design<\/strong>: While Font Awesome icons are composed of solid fill, Line Awesome icons offer clear lines with fine details, making them look modern and sophisticated. Moreover, Line Awesome icons are made of vectors, meaning they can respond to CSS styling such as icon size and colors which can further enhance your design.<\/p>\n

Better Accessibility<\/strong>: One of the great features of Line Awesome is that it doesn\u2019t require multiple images to achieve interactive effects. What\u2019s more, these icons are designed to be read by screen readers better, which makes them fully accessible as mandated by W3C guidelines.<\/p>\n

Wider Browser Support<\/strong>: Line Awesome also has great web browser support. These font icons are supported by Internet Explorer 4 and above, meaning a wider reach for your font and little compatibility issues.<\/p>\n

Easy to Use<\/strong>: Line Awesome is designed for ease of use. To get started, all you need to do is add a few lines of code and you\u2019re ready to go!<\/p>\n

Fast Loading Speed<\/strong>: If you\u2019re looking for font icons that load faster, you can\u2019t go wrong with Line Awesome. By minimizing the file size on the Web, these font icons offer a better loading speed than Font Awesome.<\/p>\n

Pixel Perfect<\/strong>: One of the reasons why I personally like Line Awesome font icons is the way they use the screen real estate. Line Awesome icons use every single pixel on your screen, offering a clean design that is just pixel-perfect<\/a>! Moreover, Line Awesome icons are sharper which look much better than the solid-filled Font Awesome icons. What\u2019s more, you can resize these icons without losing their elegance. Unlike Font Awesome icons that crumble on grids beyond 14×14 px grid, Line Awesome icons can be used in a 32x32px grid. Bye, Bye Muddled Look!<\/p>\n

Easy Flexibility<\/strong>: Switching between web font icons can be a pain in the neck (quite literally) for developers. If you\u2019re already using Font Awesome icons pack, Line Awesome helps you shift without breaking a sweat!<\/p>\n

How to Use Line Awesome in Genesis Themes<\/h2>\n

There are several ways<\/a> to add Line Awesome to your Genesis Themes. However, I personally prefer enqueuing scripts via the functions file. Before you get started, make sure you have the back-up ready. Also, don\u2019t forget to use FTP to make these changes.<\/p>\n

Step #1<\/strong>: Enqueue Line Awesome Scripts in Genesis<\/p>\n

Open your functions.php file and add the following line of code under the \u201cEnqueue Scripts and Styles\u201d. You might want to disable any Font Awesome plugin or comment out Font Awesome script in your functions file as well. Otherwise, they will clash and your Line Awesome icons won\u2019t render correctly.<\/p>\n