CODEWITHSUNDEEP
angularjstwitter-bootstrapglyphicons
Catherine
Catherine

Reputation: 251

Only certain bootstrap glyphicons are displaying correctly, consistent results in all browsers

I know that this question has been asked a lot but I tried re-downloading Bootstrap (I've got the latest version - 3.3.6), my @font-face{ } has the correct paths to my font files, I don't know what else to try. I get the same results in both Chrome and Firefox. One thought I had is that I'm trying to put my icons w/in <em> tags, but when I tried moving them to outside the tags, they still looked like squiggley lines, so that didn't fix it.

I want to use glyphicon-chevron-up and glyphicon-chevron-down (which show up as ≅ and [ ) but when I do something like <span class="caret"></span> then it looks perfectly normal.

Here is how I am using them:

<em class="pull-right">
    <em class="pull-left">
        <span class="glyphicon-chevron-up" ng-click="plusOne($index)"></span><br>
        <span class="glyphicon-chevron-down" ng-click="minusOne($index)"></span>
    </em>
    {{ post.upvotes - post.downvotes }}
</em>

I can still click the icons and increase/decrease the vote count so I don't think it is a problem with Angular, but just for reference I am using angular1.4.9 and django1.9. Again, I know several variations of this question have been asked but none of the solutions I found worked for me so any additional ideas would be appreciated!

Upvotes: 0

Views: 207

Answers (1)

Francisco Fernandez
Francisco Fernandez

Reputation: 841

Maybe its for this:

    <span class="glyphicon glyphicon-chevron-up" ng-click="plusOne($index)"></span><br>

In my page works great.

Just add glyphicon before the glyphicon-icon name.

Upvotes: 2

Related Questions