Nowadays online job are everywhere expanded around the world. There are various of online works like affiliate, reffering , research program and making a website etc. but making a website and start earn from the site attracting users in your site has been best choice for blogger. but for making money and attracting traffics you need the fascinating and unique website designed and your site top ranked on search engine.
You can see in many sites they have used some free icons in their websites like home icon , iconn in about ,icon in contact etc. Using of free icons in your site makes your site much more attractive that it impress the traffics becuase of it's beautiful designed of website and it's layout. Using of free icons in your site is very easy you can use it in your site in few steps. Today we are going to share an article about how to use free icons in any website for free. Those icons costs nothing except your hard work. So, are you confusing how to use free icons in your websites? check the post and details below.
There are some sites from those you can access free icons for your website. Yes, it is fontawesome. Goto This Link and you will redirect to the fontwesome icons site & you will see plenty of icons available there in the site. but how to access for free in your site? look at down.
How To Use Fontawesome Icons For Free?
You can use fontawesome icons in your site first you must install FontAwesome in your site , without installing of it the icons will not appear. So, follow quick method to install the fontawesome in your site and use of free icon.
A.Step First
Before start using free icons you need the installation of fontawesome in your website so, to install copy the codes from below and paste it in your index/html main codes after < head >.
Codes
B.Step Second
Use Of Free Icons
After successful installation of fontawesome in your website you can use now it in your site. To you free icons you need to write a code with the icon names. look below.
You like to home icons in your homepage then edit your homepage link and add a code . E.g.
< i class="fa fa-home"/ >
So, samely you can use other icons too. Look at the table blow to know the names of Icons.
Icons | Code Name | Style |
---|---|---|
fa fa-home | ||
fa fa-address-book | ||
fa fa-address-book-o | ||
fa fa-address-card | ||
fa fa-adjust | ||
fa fa-american-sign-language-interpreting | ||
fa fa-bar-chart | ||
fa fa-battery-o | ||
fa fa-battery-4 | ||
fa fa-bed | ||
fa fa-bell-o | ||
fa fa-bell-slash | ||
fa fa-bicycle | ||
fa fa-blind | ||
fa fa-bolt | ||
fa fa-bomb | ||
fa fa-book | ||
fa fa-bookmark | ||
fa fa-braille | ||
fa fa-briefcase | ||
fa fa-bug | ||
fa fa-bus | ||
fa fa-calculator | ||
fa fa-home | ||
fa fa-calendar | ||
fa fa-camera | ||
fa fa-child | ||
fa fa-circle-o | ||
fa fa-deaf | ||
fa fa-diamond | ||
fa fa-desktop | ||
fa fa-edit | ||
fa fa-envelope | ||
fa fa-eraser | ||
fa fa-fax | ||
fa fa-eye | ||
fa fa-female | ||
fa fa-film | ||
fa fa-flag | ||
fa fa-filter | ||
fa fa-fire | ||
fa fa-folder | ||
fa fa-gamepad | ||
fa fa-gavel | ||
fa fa-gear | ||
fa fa-gears | ||
fa fa-gift | ||
fa fa-globe | ||
fa fa-hdd-o | ||
fa fa-hotel | ||
fa fa-handshake-o | ||
fa fa-hashtag | ||
fa fa-heart | ||
fa fa-heartbeat | ||
fa fa-image | ||
fa fa-flask | ||
fa fa-crop | ||
fa fa-info | ||
fa fa-info-circle | ||
fa fa-key | ||
fa fa-keyboard-o | ||
fa fa-language | ||
fa fa-leaf | ||
fa fa-legal | ||
fa fa-lemon-o | ||
fa fa-cube | ||
fa fa-magnet | ||
fa fa-mail-reply | ||
fa fa-map | ||
fa fa-male | ||
fa fa-microphone | ||
fa fa-comments | ||
fa fa-money | ||
fa fa-minus | ||
fa fa-mobile | ||
fa fa-navicon | ||
fa fa-music | ||
fa fa-motorcycle | ||
fa fa-moon-o | ||
fa fa-paint-brush | ||
fa fa-percent | ||
fa fa-paw | ||
fa fa-pencil | ||
fa fa-plane | ||
fa fa-plug | ||
fa fa-plus | ||
fa fa-print | ||
fa fa-quote-right | ||
fa fa-quote-left | ||
fa fa-refresh | ||
fa fa-retweet | ||
fa fa-remove | ||
fa fa-road | ||
fa fa-send | ||
fa fa-shield | ||
fa fa-ship | ||
fa fa-shower | ||
fa fa-signal | ||
fa fa-sign-language | ||
fa fa-smile-o | ||
fa fa-sort-down | ||
fa fa-spoon | ||
fa fa-star | ||
fa fa-sun-o | ||
fa fa-support | ||
fa fa-tags | ||
fa fa-tasks | ||
fa fa-thumbs-down | ||
fa fa-thumbs-up | ||
fa fa-times | ||
fa fa-tint | ||
fa fa-trash | ||
fa fa-copyright | ||
fa fa-trademark | ||
fa fa-trophy | ||
fa fa-truck | ||
fa fa-tty | ||
fa fa-tv | ||
fa fa-umbrella | ||
fa fa-university | ||
fa fa-unlock | ||
fa fa-upload | ||
fa fa-user | ||
fa fa-users | ||
fa fa-user-plus | ||
fa fa-volume-off | ||
fa fa-video-camera | ||
fa fa-volume-up | ||
fa fa-warning | ||
fa fa-wheelchair | ||
fa fa-window-close | ||
fa fa-code | ||
fa fa-wifi | ||
fa fa-facebook | ||
fa fa-twitter | ||
fa fa-youtube | ||
fa fa-instagram |
So, above all are some icons, You can find more and more icons from this link. This link is official link of Fontawesome. Above icons are provided by fontawesome. so , need more click on link below.
You can style the icon with css to make it more attractive. Adding backgrounds, add border radius with css anything you like. Simply from above icon you can make floating share icons yourself. hope you like the our work. Dont forget to share with friends. leave comments if anything wrongs happened.
0 Comments