How do I decrease the size of a font-awesome icon?
Font-Awesome icons, as the name suggests, are font-based. This means to decrease their size all you have to do is decrease their font-size: .fa { font-size: 12px; }
font-awesome
Change color when hover a font awesome icon?
if you want to change only the colour of the flag on hover use this: http://jsfiddle.net/uvamhedx/ .fa-flag:hover { color: red; } <link href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css” rel=”stylesheet”/> <i class=”fa fa-flag fa-3x”></i>
Font awesome 5 on pseudo elements
Specifying the proper font-weight seems key to have some of the symbols displayed properly (and not “□□□” instead). font-weight has to be: 400 for Regular and Brands symbols 900 for Solid symbols 300 for Light symbols I.e. if you use Font-Awesome with CSS + Webfonts, a CSS-only solution is: @import url(“font-awesome/css/fontawesome-all.min.css”); /* FA CSS import … Read more
How to install only required fonts from Font Awesome?
Perhaps this helps: fontello fontello lets you choose your icons and compile your own version
How do I make sure every glyph has the same width?
Since 3.1.1, you could use the icon-fixed-width class instead of having to edit the CSS. http://fortawesome.github.io/Font-Awesome/3.2.1/examples/#navigation Since 4.0, you should use fa-fw: 4.x https://fontawesome.com/v4.7.0/examples/#fixed-width 5.x https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons Thanks @kalessin for pointing out.