Some html styling issues on Ionic and Ionicons (IoS and Android)


I would like to find out how to insert text in icons like number of comments for example within the ionicons?

An example is displayed on the front page of Ionic webpage. Its called the " Frontpage app". I checked the Github and it doesnt explain much.

Also the IoS and Android Ionicons are not showing up. Only the Ionic Icons are working.


Those iOS codes that possibly you find on are incorrect. The ios part should be changed to ios7 in order for them to show up. The Android ones should be correct though.


Thanks @DerekL

The IoS icons are indeed working now.
But the Android ones are still broken … added them in html and nothing appears…

Dear Ionic devts @mhartington would there be any simple workaround for this?


It is text inside background image.


@siddharta I understand its text within an icon from Ionic’s Github repository. How does text inside an image work?

However, when you try to do text in ionicons (I tried it for my project), the icon appears very small and words do not populate. The CSS files are tough to understand.

How did you manage to get the repo working on your local? When I run it, it says no Grunt files to run…


I just downloaded it and opened it. It runs. Inspect elements and play around you will get the hang of it. If you still cant, then ping me.



the no Grunt files is interesting, did you run
$ bower install
in your project directory?
(after running):
$ npm install

What happens when you try the tabs starter app on the ionic page:

$ ionic start myApp tabs
$ cd myApp
$ bower install 
$ npm install 
$ ionic serve 



wehn i install npm and then bower…it says no bower.json file.
then says cannot find module “lodash”