CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
user2113177
user2113177

Reputation: 350

Using Font Awesome in ui.bootstrap.rating

How can I use Font Awesome in ui.bootstrap.rating? I found out, that when I add state-on="'fa-star'" state-off="'fa-star-o'" to and changed class="glyphicon" to class="fa" in ui-bootstrap-tpls it works. But I guess there is a more custom way to change the class of the icons.

Upvotes: 2

Views: 1599

Answers (2)

amit bakle
amit bakle

Reputation: 3429

I had Font Awesome and so didnt want to include Glyphicons.

uib.bootstrap Version: 1.3.3 - 2016-05-22 uses limited Glyphicons, so this is what i added to my css

.glyphicon {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.glyphicon-star:before {
  content: "\f005";
}
/**
copied from 
.fa-star:before {
  content: "\f005";
}
*/
.glyphicon-star-empty::before {
  content: "\f006";
}
.glyphicon-chevron-right:before {
  content: "\f054";
}
.glyphicon-chevron-left:before {
  content: "\f053";
}
.glyphicon-chevron-up:before {
  content: "\f077";
}
.glyphicon-chevron-down:before {
  content: "\f078";
}

i.e. added css from Font Awesome 4.6.3 to appropriate glyphicon names

Now i dont know if this code will break on version of Font Awesome

Upvotes: 1

reptilicus
reptilicus

Reputation: 10397

Yeah as you are doing with setting state-off and state-on is their recommended manner. If you are going to have lots of the ratings on a page, I would just create a custom template and over-ride the stock template. Here is a post custom templates

Upvotes: 1

Related Questions