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-4
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>
How to style icon color, size, and shadow of FontAwesome Icons
Given that they’re simply fonts, then you should be able to style them as fonts: #elementID { color: #fff; text-shadow: 1px 1px 1px #ccc; font-size: 1.5em; }