在 ui.bootstrap.rating 中使用 Font Awesome答案

【问题标题】：Using Font Awesome in ui.bootstrap.rating在 ui.bootstrap.rating 中使用 Font Awesome
【发布时间】：2015-06-08 22:28:22
【问题描述】：

如何在 ui.bootstrap.rating 中使用 Font Awesome？我发现，当我在 ui-bootstrap-tpls 中添加 state-on="'fa-star'" state-off="'fa-star-o'" 并将 class="glyphicon" 更改为 class="fa" 时，它可以工作。但我想有一种更自定义的方式来更改图标的类。

【问题讨论】：

标签： angularjs angular-ui-bootstrap

【解决方案1】：

是的，正如您所做的那样，设置state-off 和state-on 是他们推荐的方式。如果您要在页面上有很多评级，我会创建一个自定义模板并覆盖库存模板。 Here is a post custom templates

【讨论】：

【解决方案2】：

我有 Font Awesome，所以不想包含 Glyphicons。

uib.bootstrap 版本：1.3.3 - 2016-05-22 使用有限的 Glyphicons，所以这是我添加到我的 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";
}

即将 Font Awesome 4.6.3 中的 css 添加到适当的字形图标名称中

现在我不知道这段代码是否会在 Font Awesome 版本上中断

【讨论】：