Docs# Icons
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.
# Nucleo
Argon 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 Argon. Make sure you check all of them and use those that you like the most.
# Usage
Nucleo icons are already included in the Argon plugin.
They are imported inside src/plugins/argon-dashboard.js
// 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
# FontAwesome
Optionally, Argon Dashboard PRO comes with Font Awesome which means 600+ more vector icons made for you to use.
Again, it's imported inside public/index.html file
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
# 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="ni ni-air-baloon"></i>
<i class="fa fa-bicycle"></i>
# Icons
Get the icon you need on the official website: