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.

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.

Comments

Commenting is disabled.