Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 228595

Add custom icons

$
0
0

I've used Fontastic which allows you to namespace your new icons, so that you can use

<i class='icon your-app-[icon-name]></i>

to show your custom icons alongside ionicons. It's all very easy and free on their site to upload your svg files, or choose from a ton of existing libraries, and then export your font. Include the font files (.ttf, etc) in your www/lib/ionic/fonts or www/fonts directory, whichever you prefer, and update the reference to that path in the .css file that you downloaded from Fontastic. For example:

    @font-face {
  font-family: "te-font";
  src:url("../lib/ionic/fonts/te-font.eot");
  src:url("../lib/ionic/fonts/te-font.eot?#iefix") format("embedded-opentype"),
    url("../lib/ionic/fonts/te-font.woff") format("woff"),
    url("../lib/ionic/fonts/te-font.ttf") format("truetype"),
    url("../lib/ionic/fonts/te-font.svg#te-font") format("svg");
  font-weight: normal;
  font-style: normal;

}

CAVEAT though, this was working perfectly until this this week when, after updating my iPhone to ios9, the font icons are having a "one-off" issue...in that every icon is displaying the NEXT icon in the file, not the correct one. Found this post while searching for an answer, but thought I'd pay it forward and contribute about Fontastic. If anyone has any idea what could be causing that mapping issue, please throw me a bone!


Viewing all articles
Browse latest Browse all 228595

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>