Icons
Last updated
Last updated
Rock Mountain uses Font Awesome (currently, the free license).
In _document.js, at the end of the HTML head, a Font Awesome kit is included...
<script src="https://kit.fontawesome.com/9f8d0edc47.js" crossorigin="anonymous"></script>This kit gives you access to 1,608 pixel-perfect icons. Add any of them with one line of code.
You can place Font Awesome icons just about anywhere using a style prefix and the icon’s name. We’ve tried to make it so that icons take on the characteristics and appear alongside text naturally.
Font Awesome is designed to be used with inline elements, and we recommend sticking with a consistent HTML element to reference them by in your project. We like the <i> tag for brevity and because most folks use <em></em> for emphasized/italicized semantic text these days. If that’s not your cup of tea, using a <span> is more semantically correct.
To reference an icon, you need to know two bits of information. 1) its name, prefixed with fa- (meaning “font awesome” naturally!) and 2) the style you want to use’s corresponding prefix**.
<i aria-hidden className="fas fa-camera"></i> <!-- this icon's 1) style prefix == fas and 2) icon name == camera -->
<i aria-hidden className="fas fa-camera"></i> <!-- using an <i> element to reference the icon -->
<span aria-hidden className="fas fa-camera"></span> <!-- using a <span> element to reference the icon -->Rock Mountain supports the free tier prefixes, fas (solid), and fab(brands). More style prefixes and font-face weights are available to those who license Font Awesome Pro.