CODEWITHSUNDEEP
ionic-frameworkionicons
Mulgard
Mulgard

Reputation: 10589

Ionicons: How to add custom icons?

How can i add custom icons to ionicons? I could not yet find a step by step instruction what to do. There are many really basic icons (like the paragraph icon for example) which are not provided by ionicons, so i somehow have to add them by my own.

Upvotes: 2

Views: 7707

Answers (1)

cfprabhu
cfprabhu

Reputation: 5352

Download the fonts to include in our project. Go ahead and download the latest Font Awesome release and extract them. Copy the following font files into your www/fonts directory:

  1. ontawesome-webfont.ttf
  2. fontawesome-webfont.eot
  3. fontawesome-webfont.svg
  4. fontawesome-webfont-woff
  5. fontawesome-webfont.otf Next we need to edit www/css/style.css to include this new font set for use in our project. Add the following lines:

@font-face {
    font-family: 'fontawesome';
    src:url('../fonts/fontawesome-webfont.eot');
    src:url('../fonts/fontawesome-webfont.eot') format('embedded-opentype'),
        url('../fonts/fontawesome-webfont.woff') format('woff'),
        url('../fonts/fontawesome-webfont.ttf') format('truetype'),
        url('../fonts/fontawesome-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Every time we want to use the Font Awesome set we just set our font family as fontawesome.

Get More custom icons https://icomoon.io/

Upvotes: 5

Related Questions