{"id":18684,"date":"2021-01-13T15:00:23","date_gmt":"2021-01-13T14:00:23","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=18684"},"modified":"2021-01-13T11:30:30","modified_gmt":"2021-01-13T10:30:30","slug":"how-to-add-icon-fonts-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-icon-fonts-in-wordpress\/","title":{"rendered":"How to Add Icon Fonts in WordPress"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]Icon fonts are symbols, rather than letters, that allow you to add vector icons to your website without slowing it down, since you wouldn\u2019t be using large graphics files, but font files. Whether letters or icons, fonts are themselves graphics, and have more uses than just text. In this article, we will discuss how to add icon fonts to your WordPress website. But first, let us discuss the situations in which you might want to use them.
\n[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

When Can I Use My Icon Fonts?<\/h2>\n

[\/vc_column_text][vc_column_text]The obvious advantage of icon fonts over conventional image-based icons is speed: a font symbol<\/strong>, being a vector graphic, loads the same regardless of the size<\/strong> each icon takes up on your screen. Non-vector graphics lose quality when scaled up and become fuzzy. They are also very difficult to manipulate, and may require you to use image editors to create multiple versions of each graphic and then fiddle with your website settings until you have made sure that each device your visitor may be using is shown the optimal version of each graphic.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Conversely, fonts (including icon fonts) are easily scalable without loss in quality<\/strong>, they are literally made to be styled with colours and shadows<\/strong>, if needed, and are generally lightweight<\/strong>, especially in comparison to other graphics.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]An icon font typically contains commonly used symbols<\/strong> for various online functionalities, such as folders, chat bubbles, arrows, folders, pins, and similar<\/strong>. They are very often found in navigation menus, but you can use them anywhere you would otherwise use an image to indicate a common function. It will also possibly save you some time and money on icon design<\/strong> \u2013 after all, all you need is a comprehensive font.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]There are plenty of icon fonts to choose from, but our preferred ones are Font Awesome<\/a> and Font Elegant<\/a>. For the purposes of this demonstration, we will mostly be using Font Awesome. Here is what we\u2019ll be covering:[\/vc_column_text][vc_empty_space height=”22px”]