Hyper Text Markup Language
This is instruction on what Icon fonts are and how to use them.
What are Icon fonts?
Icon fonts are just fonts that we use every day in our digital world. However, instead of containing letters or numbers, they contain symbols and glyphs. You can style them with CSS in the same way you style regular text which has made them a popular choice on the internet.
Pros and Cons of Icon Fonts
Pros
• There are many benefits to using icon fonts instead of bitmap images in your projects. Here are some of those:
• Because they are vector graphics, they’re scalable. This means you can scale them up or down without losing their quality, so they always look clean.
• You send one single or few HTTP request(s) to load them instead of multiple HTTP requests that bitmap images might require. This means a faster load time on pages.
• They load fast because of their small size.
• They’re supported in all browsers (even back to IE6).
• You can apply any CSS effects to them if you do backend HTML
Cons
• They don’t work well for an international audience, because of the variety of devices.
• Some screen readers have a difficult time with icons and may read them as a letter
• Many older browsers do not know who to handle them and they show up as blanks or question marks.
• WordPress will often hide them in the “visual” edit area when writing a post.
Font Awesome Icons
Are very popular. To use the Font Awesome icons, add the following line inside the <head> section of your HTML page:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Examples of Font Awesome icons:
<i class=”fa fa-cloud”></i>
<i class=”fa fa-heart”></i>
<i class=”fa fa-car”></i>
</i ><i class=”fa fa-file”></i>
<i class=”fa fa-bars”></i>
Styled Font Awesome icons (size, color, and shadow):
<i class=”fa fa-cloud” style=”font-size: 24px;”></i>
<i class=”fa fa-cloud” style=”font-size: 36px;”></i>
<i class=”fa fa-cloud” style=”font-size: 48px; color: dodgerblue;”></i>
<i class=”fa fa-cloud” style=”font-size: 60px; color: purple; text-shadow: 2px 2px 4px #000000;”></i>