Use Windows 10 Web Font Icons On a Website

On Microsoft’s Windows 10, we have seen extensive usage of modern line icons. Even though generally these icons are not available for web usage in Web font form, you can easily head towards Icons8 use their version of Windows 10 icons. Here is the sample for some of the icons available on this Font.

Icons8 Windows10 Web FontIcons8 Windows10 Web Font.

The concept is fairly easy to understand. If you have experience with using Google Web fonts, this should really easy for you.

This is what you should do

Step 1: Head towards the GitHub page of Icons8.

Step 2: Go through the list of repositories and you should find Windows 10 icons repository.

Step 3: To take a look at the preview of all the fonts, take a look at the font preview page. You should also find the CDN link(below) for the CSS file (icons8-win10 font).

<link rel="stylesheet" href="//maxcdn.icons8.com/fonts/icons8_win10/1.0./styles.min.css">

Step 4: Copy the line on your HTML page within the <head></head> tag.

Step 5: You should find the CSS selector class names on the font preview page. You can pick up your desired class depending on the icon you want to display on your page. It should look something like this one.

<i class="icons8-add-shopping-cart"></i>

These classes can also be used with <span></span> item.

Please remember that while styling with CSS, you should use the font-family property’s value as “icons8-win10”. In other words, this is how exactly it should look like on your CSS file.

font-family: "icons8-win10";

I hope you got the idea. If you have question regarding this topic, feel free to drop me a line from the comment section below. I would love to get back to you guys. Thanks.

Today In History

  •  
  •  

Comment

Leave a Reply

Note: Convet HTML, PHP, JavaScripts from HTMLify, before posting from comment section.
License: By submitting a comment here you grant this site a perpetual license to reproduce your words and name/Web site in attribution. Please use your real name or a pseudonym (i.e., pen name, alias, nom de plume) when commenting. If you add your site name, company name, or something completely random, I'll likely change it to whatever I want.