Font Awesome 6: Full Review
- 1 How to install Font Awesome
- Method 1.
- Method 2.
- 2 How to use Font Awesome icons
- 1 Standard icons
- 2 Large icons
- 3 Fixed Width Icons
- 4 Icons for bulleted list
- 5 Framed icons and quotes
- 6 Animated icons
- 7 Transformed Icons
- 8 Combination Icons
- 3 Font Awesome 4.5.0 collection, classes and css code to insert using the content property
- 4 Related Resources
- Icon size
- Icon color
- Frequently Asked Questions
Font Awesome is a collection of scalable vector icons. Icons can be formatted using css properties, set their color, size, shadow and much more. Font version 5.5.0 includes 605 icons.
1 How to install Font Awesome
Method 1.
Use the font-awesome.css version of the file by adding the following code to the <head> section:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Once the font is connected, you can use the icons on your site.
Method 2.
Download the font from Font Awesome. Unpack the archive and upload two folders from the archive to the site server - css and fonts. If you already have folders with such names on your site, then you just need to add files from the downloaded folders to them.
You can use the full or minified version of the file:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 How to use Font Awesome icons
Icons can be added to a web page in two ways: by setting the appropriate classes for the <i> and <span> elements, or by adding them to the desired element using the :before, :after pseudo-elements and the appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li:before{content:"\f015";/* add home icon */font-family:FontAwesome;color:#aaaaaa;margin-right :10px;}1 Standard icons
Font Awesome is designed to be used with inline elements. In order to add icons, you first need to set the fa class to the <i> or <span> element.
To add the selected icon before or after the element, an empty <i></i> or <span></span> element is added to the element, which is assigned an icon class, as well as an additional class that extends the styling.
<i class="fa fa-camera-retro"></i>2 Large icons
To increase the size of an icon relative to its container, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, fa-5x classes.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 Fixed Width Icons
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation or lists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Home</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Library</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Applications</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Settings</a ></li></ul>4 Icons for bulleted list
Use the fa-ul and fa-li classes to replace the default bullets in a <ul>…</ul> bulleted list.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>list item</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>list item</li> <li><i class="fa-li fa fa-square"></i>list item</li></ul>5 Framed icons and quotes
Use the fa-border class to set the border for the icon. The pull-right and pull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien.</p>6 Animated icons
Add the fa-spin, fa-pulse, fa-refresh, fa-cog classes to set up spinning icons. Animation is not supported in IE8 - IE9.
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7 Transformed Icons
To rotate or flip icons, use the fa-rotate-* and fa-flip-* classes.
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 Combination Icons
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, and fa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>3 Font Awesome 4.5.0 collection, classes and css code to insert using the content property
Icons for web applications Fa-adjust - \f042;Fa-anchor - \f13d;
Fa-archive - \f187;
Fa-arrows - \f047;
Fa-asterisk - \f069;
Faat - \f1fa;
Fa-balance-scale - \f24e;
Fa-ban - \f05e;
Fa-bank - \f19c;
Fa-barcode - \f02a;
Fa-battery-empty - \f244;
Fa-battery-half - \f242;
Fa-battery-quarter - \f243;
Fa-battery-three-quarters - \f241;
Fa-battery-full - \f240;
Fa-bed - \f236;
Fa-beer - \f0fc;
Fa-bell - \f0f3;
Fa-bell-slash - \f1f6;
Fa-binoculars - \f1e5;
Fa-birthday-cake - \f1fd;
Fa-bolt - \f0e7;
Fa-bomb - \f1e2;
Fa-book - \f02d;
There are a lot of icons, besides them there are other categories: icons and transport, gender icons, file icons, currency icons, control character icons, payment system icons, social network and community icons, text editing icons, direction icons, video player icons, brand icons icons, rotating icons.
4 Related Resources
In addition to the Font Awesome collection, you can use other icon fonts as well.
Fontello.Fontello has a large collection of various icon fonts. You can select the icons you like and download them to your computer.
Foundation Icon.Foundation Icon is another icon font collection from the developers of the Foundation framework. In addition to standard icons, the site features round icons, social media icons, and more.
material icons.Material icons are Google's unified flat icons that embody ease of perception. Icons are optimized for beautiful display on all common platforms and for all screen resolutions.
The icon font collection contains 750+ icons. The easiest way to install a collection on your website is to use icons like Google Web Fonts. To do this, the following code is included in the page markup:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">To correctly display the font in browsers, the element that will use the icon font is given the material-icons class:
.material-icons { font-family: 'Material Icons'; font-weight: normal font-style: normal font-size: 24px; /* Preferred icon size */ display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; letter-spacing: normal word-wrap: normal; white-space: nowrap; direction:ltr; -webkit-font-smoothing: antialiased; /* Supported by all WebKit browsers */ text-rendering: optimizeLegibility; /* Safari and Chrome support */ -moz-osx-font-smoothing: grayscale; /* Firefox support. */ font-feature-settings: 'liga'; /* IE support. */}The icons themselves are added using the <I class=''material-icons''>ligature or html code of the icon </i> tag, for example:
<i class="material-icons">account_balance_wallet</i><i class="material-icons"></i>The ligature is understood by all modern browsers, IE - starting from version 10. The icon code is generated automatically, for this you need to left-click on the icon image and copy the suggested look.
Icon size
Icon size is controlled by additional classes:
.material-icons.md-18 {font-size: 18px;} /* for <i class="material-icons md-18"></i> */.material-icons.md-24 {font-size: 24px;} /* for <i class="material-icons md-24"></i> */.material-icons.md-36 {font-size: 36px;} /* for <i class="material-icons md-36"></i> */.material-icons.md-48 {font-size: 48px;} /* for <i class="material-icons md-48"></i> */Icon color
The color of the icons is also set using additional classes:
.material-icons.md-dark {color: rgba(0, 0, 0, 0.54);} /* <i class="material-icons md-dark"></i> */.material-icons.md-light {color: rgba(255, 255, 255, 1);} /* <i class="material-icons md-light"></i> */.material-icons.md-dark.md-inactive {color: rgba(0, 0, 0, 0.26);} /* <i class="material-icons md-dark md-inactive"></i> * /.material-icons.md-light.md-inactive {color: rgba(255, 255, 255, 0.3);} /* <i class="material-icons md-light md-inactive">face</i> */To set a custom color, you need to add a class that defines the color of the icon, for example:
.material-icons.indigo {color: #1A237E;} /* <i class="material-icons indigo"></i> */Frequently Asked Questions
- What is Font Awesome in simple terms?
- In essence, it is a font with icons that can be added to any web page element to enhance its visibility and design. The collection consists of several hundred icons suitable for any task and purpose.More information on this link
Michel Pinson is a Travel enthusiast and Content Creator. Merging passion for education and exploration, he iscommitted to sharing knowledge and inspiring others through captivating educational content. Bringing the world closer together by empowering individuals with global expertise and a sense of wanderlust.
