Ionicons and Icomoon

ionic-v1
1

Hi All,

I am trying to add few icons to my app from Icomoon but all its displaying is an exclamation mark icon.
It looks like ion-alert.

I added the font files from icomoon to my fonts folder.

\www\assets\lib\ionic\fonts

My test glyph is called ion-wink

I then updated www\assets\css\ionic.app.css

@font-face {
font-family: “icomoon”;
src: url("…/lib/ionic/fonts/icomoon.eot");
src: url("…/lib/ionic/fonts/icomoon.eot") format(“embedded-opentype”),
url("…/lib/ionic/fonts/icomoon.ttf") format(“truetype”),
url("…/lib/ionic/fonts/icomoon.woff") format(“woff”),
url("…/lib/ionic/fonts/icomoon.svg") format(“svg”);
font-weight: normal;
font-style: normal; }

.ion-wink:before

.ion-wink:before {
content: “”; }

HTML Code:


Any idea where I am going wrong or is this approach even doable.
Appreciate any assistance. Thanks

2

Just posting the fix for the above as I figured it out.
The content attribute for the css is incorrect. On IcoMoon site, hit “<> Get Code” under the icon. Then copy this to ionic.app.css or style.css.

.ion-wink:before {
  content: "\e9e8";
  font-family: "teaze";
}

Works a charm and easy way to add icon fonts to your app without messing around with the ionicon library :slight_smile:

1 Like