Copied to clipboard!
Feedback
What kind of feedBack do you have?
Now! All icon fonts are in separate page
Download Font Icons

Frequently Asked Questions

What is Icon fonts?

Icon fonts have one master CSS and font files, Basically, it has contained a lot of iconographies which you can use easily by just putting a very small code snippet and also you can style with modern with CSS3, like font-size, color, shadow effects, transition, etc.

What is advantages to use Icon fonts?

To use icon fonts, you just need to embed the icon web font on your web app it is smaller in file size than a series of icons images, it is really flexible when you have a big web project and need lots of icons with retina displays.

It has full CSS styling capability that is easy to change icon size with css properies, also you can use CSS3 advance properties, like transitions, drop shadows, gradient, animation etc. with cross browser compatibility. With icon fonts you can avoid to generate sprites and separate icon images and this will definitely save your time and efforts.

What is the license for UXWing icon fonts?

All web icon fonts are free to any commercial projects for yourself or a client, and licensed under MIT Licence and Open Font License. For more information on the rights of use, please see the license agreement

Can i use icon fonts in CSS without adding html code?

Yes, You can use with the pseudo element by just copy and paste CSS code which we provide in this page. Look at this Help Document it will help you lot.

How can i use font icons in my mockup and wireframe?

It is really easy, In download pack, you will find the TTF font file which you can install on your computer, then just copy and paste the character into your mockup and wireframe. Look at this video it will help you lot.

Complete video guide.

YouTube Video Link
How to use font icons in HTML code
After downloading you will get all the 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 a 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!