Bootstrap icons usage is a quick tutorial which describes the proper way of using Font Awesome icons in Bootstrap framework.
MDB uses a powerful set of icons called Font Awesome.
One Font, 628 IconsIn a single collection, Font Awesome is a pictographic language of web-related actions.
Infinite ScalabilityScalable vector graphics means every icon looks awesome at any size.
Free, as in SpeechFont Awesome is completely free for commercial use.
CSS ControlEasily style icon color, size, shadow, and anything that's possible with CSS.
Perfect on Retina DisplaysFont Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
Accessibility-mindedFont Awesome loves screen readers and helps make your icons accessible on the web.
Example: basic icon fa-camera-retro
You can place Font Awesome icons just about anywhere using the CSS Prefix
fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the
<i> tag for brevity, but using
<span> is more semantically correct).
<i class="fa fa-camera-retro"></i> fa-camera-retro
- Example: basic icon If you change the font-size of the icon's container, the icon gets bigger. Same thing goes for color, drop shadow, and anything else that gets inherited using CSS.
To increase icon sizes relative to their container, use the
fa-lg (33% increase),
<i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x <i class="fa fa-camera-retro fa-3x"></i> fa-3x <i class="fa fa-camera-retro fa-4x"></i> fa-4x <i class="fa fa-camera-retro fa-5x"></i> fa-5x
- If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.
Full list of icons
To see the full list of available icons click the button belowIcons list