Vue Bootstrap Icons
Vue Icons - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
Vue 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 Icons
In a single collection, Font Awesome is a pictographic language of web-related actions.No JavaScript Required
Fewer compatibility concerns because Font Awesome doesn't require JavaScript.Infinite Scalability
Scalable vector graphics means every icon looks awesome at any size.Free, as in Speech
Font Awesome is completely free for commercial use.CSS Control
Easily style icon color, size, shadow, and anything that's possible with CSS.Perfect on Retina Displays
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.Accessibility-minded
Font Awesome loves screen readers and helps make your icons accessible on the web.Font Awesome version 5 has been re-written and re-designed completely from scratch.
What’s Changed
- 3 Different Icon Styles - every icon is introduced in a solid, regular, and light style. Brand icons are separated into their own style/category for easier use. Version 5 has four prefixes to let us set the style of any icon easily:
| New Prefix | Icon Style | SVG + JS Filename | Web Font Filename | Availability |
|---|---|---|---|---|
fab |
Font Awesome Brands | brands.js |
fa-brands-400.* |
Free |
fas or fa |
Font Awesome Solid | solid.js |
fa-solid-900.* |
Free |
far |
Font Awesome Regular | regular.js |
fa-regular-400.* |
Pro only |
fal |
Font Awesome Light | light.js |
fa-light-300.* |
Pro only |
- Icon Name Changes - Aliases have been removed in version 5, each icon has one official name and some of those names have been adjusted under new standard and conventions.
- Outline Style Icons - Similarly, all icons that had an outlined style (and usually ended with -o) now have a prefix of far and have had their -o suffix removed.
We have implemented corresponding properties in our mdbIcon component. To find and fast implement your desired icon use our icon list with search tool.
Basic usage
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
a <span> is more semantically correct).
<template>
<mdb-icon icon="camera-retro" /> fa-camera-retro
</template>
<script>
import { mdbIcon } from 'mdbvue';
export default {
components: {
mdbIcon
}
}
</script>
- 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.
Larger icons
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
To increase icon sizes relative to their container, use the size="lg" (33% increase), size="2x",
size="3x", size="4x", or size="5x" props.
<template>
<div>
<mdb-icon icon="camera-retro" size="lg" /> fa-lg
<mdb-icon icon="camera-retro" size="2x" /> fa-2x
<mdb-icon icon="camera-retro" size="3x" /> fa-3x
<mdb-icon icon="camera-retro" size="4x" /> fa-4x
<mdb-icon icon="camera-retro" size="5x" /> fa-5x
</div>
</template>
<script>
import { mdbIcon } from 'mdbvue';
export default {
components: {
mdbIcon
}
}
</script>
- If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height.
Colors
amber-text
red-text
indigo-text
cyan-text
green-text
To see all colors options, go to colors list.
<template>
<div>
<p><mdb-icon icon="bolt" size="3x" class="amber-text pr-3" aria-hidden="true" /> amber-text</p>
<p><mdb-icon icon="bug" size="3x" class="red-text pr-3" aria-hidden="true" /> red-text</p>
<p><mdb-icon icon="heart" size="3x" class="indigo-text pr-3" aria-hidden="true" /> indigo-text</p>
<p><mdb-icon icon="bell" size="3x" class="cyan-text pr-3" aria-hidden="true" /> cyan-text</p>
<p><mdb-icon icon="birthday-cake" size="3x" class="green-text pr-3" aria-hidden="true" /> green-text</p>
</div>
</template>
<script>
import { mdbIcon } from 'mdbvue';
export default {
components: {
mdbIcon
}
}
</script>
Margins
ml-3
mr-3
mx-4
my-4
m-5
You can add spacing to your icons from the top, bottom, right, left or all sides. Look at here to see all possibilities.
<template>
<div>
<p><mdb-icon icon="gift" size="2x" class="pink-text ml-3" aria-hidden="true" /> ml-3</p>
<p><mdb-icon icon="gift" size="2x" class="pink-text mr-3" aria-hidden="true" /> mr-3</p>
<p><mdb-icon icon="gift" size="2x" class="pink-text mx-4" aria-hidden="true" /> mx-4</p>
<p><mdb-icon icon="gift" size="2x" class="pink-text my-4" aria-hidden="true" /> my-4</p>
<p><mdb-icon icon="gift" size="2x" class="pink-text m-5" aria-hidden="true" /> m-5</p>
</div>
</template>
<script>
import { mdbIcon } from 'mdbvue';
export default {
components: {
mdbIcon
}
}
</script>
Features
Icons are very useful when you want to show the features of something. Look at here to see more our features sections.
Why is it so great?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
International
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
Experimental
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
Relaxing
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
Beloved
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
Rapid
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
Magical
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
<template>
<!--Section: Features v.4-->
<section>
<!--Section heading-->
<h2 class="h1-responsive py-5 font-weight-bold text-center">Why is it so great?</h2>
<!--Section description-->
<p class="px-5 mb-5 pb-3 lead grey-text text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam.</p>
<!--Grid row-->
<mdb-row>
<!--Grid column-->
<mdb-col md="4">
<!--Grid row-->
<mdb-row class="mb-2">
<mdb-col col="2">
<mdb-icon icon="flag-checkered" size="2x" class="deep-purple-text" />
</mdb-col>
<div class="col-10 text-left">
<h5 class="font-weight-bold">International</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
nam, aperiam minima assumenda
deleniti hic.</p>
</div>
</mdb-row>
<!--Grid row-->
<!--Grid row-->
<mdb-row class="mb-2">
<mdb-col col="2">
<mdb-icon icon="flask" size="2x" class="deep-purple-text"></mdb-icon>
</mdb-col>
<div class="col-10 text-left">
<h5 class="font-weight-bold">Experimental</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
nam, aperiam minima assumenda
deleniti hic.</p>
</div>
</mdb-row>
<!--Grid row-->
<!--Grid row-->
<mdb-row class="mb-2">
<mdb-col col="2">
<mdb-icon icon="glass" size="2x" class="deep-purple-text"></mdb-icon>
</mdb-col>
<div class="col-10 text-left">
<h5 class="font-weight-bold">Relaxing</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
nam, aperiam minima assumenda
deleniti hic.</p>
</div>
</mdb-row>
<!--Grid row-->
</mdb-col>
<!--Grid column-->
<!--Grid column-->
<mdb-col md="4" class="mb-2 center-on-small-only flex-center">
<img src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-portfolio1.png" alt="" class="z-depth-0">
</mdb-col>
<!--Grid column-->
<!--Grid column-->
<mdb-col md="4">
<!--Grid row-->
<mdb-row class="mb-2">
<mdb-col col="2">
<mdb-icon icon="heart" size="2x" class="deep-purple-text"></mdb-icon>
</mdb-col>
<div class="col-10 text-left">
<h5 class="font-weight-bold">Beloved</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
nam, aperiam minima assumenda
deleniti hic.</p>
</div>
</mdb-row>
<!--Grid row-->
<!--Grid row-->
<mdb-row class="mb-2">
<mdb-col col="2">
<mdb-icon icon="bolt" size="2x" class="deep-purple-text"></mdb-icon>
</mdb-col>
<div class="col-10 text-left">
<h5 class="font-weight-bold">Rapid</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
nam, aperiam minima assumenda
deleniti hic.</p>
</div>
</mdb-row>
<!--Grid row-->
<!--Grid row-->
<mdb-row class="mb-2">
<mdb-col col="2">
<mdb-icon icon="magic" size="2x" class="deep-purple-text"></mdb-icon>
</mdb-col>
<div class="col-10 text-left">
<h5 class="font-weight-bold">Magical</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
nam, aperiam minima assumenda
deleniti hic.</p>
</div>
</mdb-row>
<!--Grid row-->
</mdb-col>
<!--Grid column-->
</mdb-row>
<!--Grid row-->
</section>
<!--/Section: Features v.4-->
</template>
<script>
import { mdbIcon, mdbRow, mdbCol } from 'mdbvue';
export default {
components: {
mdbIcon,
mdbRow,
mdbCol
}
}
</script>
Full list
To see the full list of available icons click the button below
Icons list