Question

在这里，我在箭头内有一个fa图标，我想将其更改为fa fa-plus-square，但没有任何可触摸的html，而是从CSS制作而成。如何实现？

<div class="footer-text">
   <h4 itemprop="name">LOREM IPSUM</h4>
   <p class="text" itemprop="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa...</p>
   <span class="arrow"><i class="fa fa-chevron-right"></i></span>
</div>

Answer 1

要覆盖Fontawesome图标，必须输入fa-plus-square的字符代码。

Ref: plus-square

加号的字符代码为f0fe。您只需要使用它覆盖fa-chevron-right:before。

span.arrow > i.fa.fa-chevron-right:before {
  content: "\f0fe";
}

完整代码段：

span.arrow > i.fa.fa-chevron-right:before {
  content: "\f0fe";
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">

<div class="footer-text">
  <h4 itemprop="name">LOREM IPSUM</h4>
  <p class="text" itemprop="description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa...</p>
  <span class="arrow"><i class="fa fa-chevron-right"></i></span>
</div>

Answer 2

您可以修改font-awesome.css并将fa-chevron-right类中的代码更改为其他图标，或者仅在不同的CSS文件中添加fa-chevron-right类并添加必要的代码要显示所需的图标，但必须确保在字体超赞文件之后声明了新的CSS文件。

从CSS更改fa图标

2 个答案: