Home





How to use font icons in your design

YouTube Video Link

How to use font icons in HTML code
(1) Download zip file from Home Page

After downloading you will get all files which you need to including your web page.

(2) Include CSS File

You need to include uxwing-iconsfont.css in your head section in web page. Make sure you change the path to point to the file on your server.

<link rel='stylesheet' href='yourpath/uxwing-iconsfont.css' />

(3) Change path in css

open “uxwing-iconsfont.css” Again, ensure that the path to the files matches the setup on your server.

@font-face {
font-family: ‘uxwing-iconsfont’;
src: url(‘../yourpath/uxwing-iconsfont.eot?v=1.0’);
src: url(‘../yourpath/uxwing-iconsfont.eot?v=1.0#iefix’) format(’embedded-opentype’),
url(‘../yourpath/uxwing-iconsfont.ttf?v=1.0’)
format(‘truetype’),

url(‘../yourpath/uxwing-iconsfont.woff?v=1.0’) format(‘woff’),
url(‘../yourpath/uxwing-iconsfont.svg?v=1.0#uxwing-iconsfont’) format(‘svg’);
font-weight: normal;
font-style: normal;}
(4) HTML Integration

Check HTML Integration code below

<i class="fi fi-newspaper"></i>

Done! Result

You can customize by apply css properties

How to use font icons in CSS code

(1) Include CSS File

The first step is to include uxwing-iconsfont.css in your the head of your HTML. Make sure you change the path to point to the file on your server.

<link rel='stylesheet' href='yourpath/uxwing-iconsfont.css' />

(2) Change path in css

open “uxwing-iconsfont.css” Again, ensure that the path to the files matches the setup on your server.

@font-face {
font-family: ‘uxwing-iconsfont’;
src: url(‘../yourpath/uxwing-iconsfont.eot?v=1.0’);
src: url(‘../yourpath/uxwing-iconsfont.eot?v=1.0#iefix’) format(’embedded-opentype’),
url(‘../yourpath/uxwing-iconsfont.ttf?v=1.0’) format(‘truetype’),
url(‘../yourpath/uxwing-iconsfont.woff?v=1.0’) format(‘woff’),
url(‘../yourpath/uxwing-iconsfont.svg?v=1.0#uxwing-iconsfont’) format(‘svg’);
font-weight: normal;
font-style: normal;}
(3) CSS Integration
.classname{position:relative;}
.classname:before{
content:”\e919″;
font-family:”uxwing-iconsfont”;
left:0px;
position:absolute;
top:0;
}
Done!