gpt4 book ai didi

html - 从 css 更改 fa 图标

转载 作者:太空宇宙 更新时间:2023-11-04 06:24:18 25 4
gpt4 key购买 nike

这里我有一个箭头内的 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>

最佳答案

要覆盖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>

关于html - 从 css 更改 fa 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55212966/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com