如何使用css中的fontAwesome图标

Question

我可以在css中使用font-awesome图标吗？现在我尝试使用html但是在按钮上我需要使用像:after :before这样的伪类，所以你能帮助我吗？

＆＃13;

＆＃13;

ul li {
  display: inline-block;
}

.right {
  float: right;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul class="right">
  <li><button>Note <i class="fa fa-plus"></i></button></li>
</ul>
<ul>
  <li><a href="#"><i class="fa fa-user"></i></a></li>
  <li><a href="#"><i class="fa fa-book"></i></a></li>
  <li><a href="#"><i class="fa fa-cart-plus"></i></a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果你检查元素，你会注意到你可以像这样使用 font awsome ：

.my-icon:before {
    content: "\f02d"; /* The content of book icon*/
}
.my-icon {
    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;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul>
  <li><a href="#"><i class="my-icon"></i></a></li>
</ul>

您需要能够找到每个图标的代码才能使用它们。您可以通过使用该图标检查元素（例如在font-awsome的网站中）来执行此操作。

您还可以通过更改字体大小来控制图标的大小。这是一个红色的大图标：

.my-icon:before {
    content: "\f02d"; /* The content of book icon*/
    font-size: 32px;
    color:red;
}
.my-icon {
    display: inline-block;
    font: normal normal normal 24px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul>
  <li><a href="#"><i class="my-icon"></i></a></li>
</ul>

Answer 2

您只需要为元素设置 FontAwesome 字体，并使用 Unicode 添加伪元素。

＆＃13;

＆＃13;

ul li {
   display: inline-block;
}

.right {
   float: right;
}

button {
    font: normal normal normal 14px/1 FontAwesome;
}
button:after {
    content: "\f217";
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul class="right">
  <li><button>Note</i></button></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以这样使用。我已经更新了你的代码。

＆＃13;

＆＃13;

ul li {
  display: inline-block;
}

.right {
  float: right;
}

button:after {
  content: "\f067";
  font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<ul class="right">
  <li><button>Note</button></li>
</ul>
<ul>
  <li><a href="#"><i class="fa fa-user"></i></a></li>
  <li><a href="#"><i class="fa fa-book"></i></a></li>
  <li><a href="#"><i class="fa fa-cart-plus"></i></a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 4

span:before{
  content: "\f0c9";
  font-family: 'FontAwesome';
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<span>hello</span>