Font Awesome为按钮添加多个图标

Question

我有这个按钮：

.directive('playbtn', function() {
  return {
    restrict: 'E',
    template: '<i class=""></i>',
    link: function(scope,element,attrs) {
      if(scope.autoplay == 'true') {
       //show pause button

      } else {
       //show play button
      }
    };    
  } 
})

问题是我想添加多个图标，如：

我只设法添加感叹号三角形图标，但如果我尝试添加另一个，则第一个不会出现。有没有办法可以添加所有这四个图标，如附加的按钮图像？

Answer 1

只需将它们分开添加：Example

<span class="fa fa-exclamation-triangle"></span>
<span class="fa fa-bar-chart"></span>
<br>
<span class="fa fa-bolt"></span>
<span class="fa fa-ban"></span>

Answer 2

您可以在具有伪content的单个元素上使用多个图标，只需使用字体真棒unicode，并为换行符添加\A，使用white-space:pre来保留空白。您可以根据需要使用margin，padding等进行调整。

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");

button {
  background: orange;
  border: 0;
  font-size: 30px;
  line-height: 1.25;
}
button:after {
  font-family: 'FontAwesome';
  content: '\f071\f01e\A\f188\f1b8';
  white-space: pre;
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
}

<button>05</button>