在移动设备上设计angular-ui评级指令

Question

I am using the angular-ui rating icon on a responsive site and on mobile size devices the stars are being forced onto two lines in some places. I want to change the font size(they are font icons so I am assuming this is the best way to do it) to something slightly smaller when on a mobile device.

I can target the stars with this css

span.rating > i.glyphicon::before

and my changes take effect in the deskptop browser but not on android or ios 7 on ipad or iphone

What am I missing?

Answer 1

Try targeting the containing element instead:

.glyphicon.ng-scope.glyphicon-star {
    font-size: 2em;
}

http://plnkr.co/edit/H92Cv9uPpd1QIOb2mbdc?p=preview