BootstrapVue Icons

Bootstrap doesn’t include an icon library by default, but we have a handful of Bootstrap icons recommendations for you to choose from.


Nucleo

BootstrapVue Argon Dashboard comes with 100 custom icons made by our friends from Nucleo App. The official package contains over 25000 icons which are looking great in combination with BootstrapVue Argon Dashboard. Make sure you check all of them and use those that you like the most.

Usage

In order to use this icons on your page you will need to include the following script in the <head> section of your page before the theme’s main style:

// asset imports
import '@/assets/sass/argon.scss';
import '@/assets/css/nucleo/css/nucleo.css';

Initialization

Start placing icons in your HTML’s <body>. We recommend using a consistent HTML element, like <i>. Find the right icon and learn how to reference it in your markup.

You need to know two bits of information to reference an icon:

  1. its name, prefixed with ni- and
  2. the style you want to use’s corresponding prefix.
<i class="ni ni-air-baloon"></i>

Icons

Want more icons? Increase your collection by choosing more icon examples from Nucleo App website: Go to Nucleo App

Font Awesome 5

Optionally, BootstrapVue Argon Dashboard comes with Font Awesome which means 3000+ more vector icons made for you to use.

Usage

In order to use this icons on your page you will need to include the following script in the <head> section of your page before the theme’s main style:

<link href="/assets/vendor/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">

Initialization

Start placing icons in your HTML’s <body>. We recommend using a consistent HTML element, like <i>. Find the right icon and learn how to reference it in your markup.

You need to know two bits of information to reference an icon:

  1. its name, prefixed with fa- and
  2. the style you want to use’s corresponding prefix.
<i class="fas fa-heart"></i>

Icons

Get the icon you need on the official website:

Go to Font Awesome

Bootstrap Glyphicons

Another option for icons are Glyphicons.