如何从CSS使用fontAwesome图标

Question

我能使用font-awesome图标和CSS吗？现在我已经尝试了HTML，但是在按钮上我需要使用伪类如 :after :before，所以你能帮助我吗？

ul li {
  display: inline-block;
}

.right {
  float: right;
}

<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>

- user8847118

---

请解释一下吗？您现在正在使用图标，有什么问题吗？ - Temani Afif

这个按钮将从CMS生成，因此我可以在HTML中的按钮内添加代码。但是在CMS中将为其生成类，我也可以从CSS中实现 :) - user8847118

https://ohmycheatsheet.com/fontawesome/ 可能会有帮助。 - Shiva

Answer 1

您可以这样使用。我已更新您的代码。

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;
}

<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>

- Ram kumar

Answer 2

如果您检查元素，您会注意到可以像这样使用 Font Awesome:

.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-awesome网站上）来轻松完成此操作。

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

.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>

- Temani Afif

Answer 3

你只需要将 FontAwesome 字体设置到元素中，并添加带有 Unicode 的伪元素即可。

ul li {
   display: inline-block;
}

.right {
   float: right;
}

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

<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>

- Timofey Lavrenyuk

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>

- koorosh safeashrafi