FontaAwesome作为锚定标签的内容

Question

我不确定这是不是因为我在互联网上搜索的所有地方都看到人们只在假选择器上使用fontAwesome图标。我希望我的fontAwesome图标在预定义的.btn类中显示为内容。

基本上我的代码如下所示：

HTML

<a class="btn phone" href="#"></a>

CSS

.phone {
    font-family: 'fontAwesome';
    content: "\f095";
}

.btn { /*defined in another file*/ }

类似于此的代码适用于其他锚点，但我无法使其工作。我希望你理解我的问题

Answer 1

尝试：在CSS选择器之前。它是创建伪元素的原因。

.phone:before {
    font-family: 'fontAwesome';
    content: "\f095";
 }

 .btn { /*defined in another file*/ }

Answer 2

  

我看到人们只在假选择器上使用fontAwesome图标。我希望我的fontAwesome图标在预定义的.btn类中显示为内容。

content属性与::before和::after伪元素一起使用，以在元素中生成内容。要回答你的问题，它不会按照你想要的方式工作。看看这个小提琴：http://jsfiddle.net/yongchuc/adt394sp/。

Answer 3

我这样做<a href="#" onclick="alert('see me work')"><i class="fa fa-times"></i></a>

示例：

https://jsfiddle.net/w63ffsdn/

Answer 4

工作示例：http://jsfiddle.net/7ev7071e/

.phone,
.phone:before {
    font-family: 'fontAwesome';
}
.phone:before {
    content: "\f095";
}

.btn { /*defined in another file*/ }