Adding icons with Foundation Icon Fonts 3

Foundation Icon Fonts 3 is one of the useful icon font sets that we can use with CSS on projects for frontend development. It can save you from creating common icons yourself such as social media icons (Facebook, Twitter, YouTube), arrow icons (arrow up, arrow down, and so on), accessibility icons (wheelchair, elevator, and so on), e-commerce icons (shopping cart, credit card, and so on), and text editor icons (bold, italic, and so on). Let's find out how you can install it for your Nuxt project in the following steps:

1. Install Foundation Icon Fonts 3 via npm:

$ npm i foundation-icon-fonts

2. Add the path of Foundation Icon Fonts globally in the Nuxt config file:

// nuxt.config.js
export default {
  css: [
    'foundation-icon-fonts/foundation-icons.css',
  ]
}

3. Apply the icon to any <i> element using the icon name prefixed with fi, for example:

<i class="fi-heart"></i>

You can find...