SVG FontAwesome 不带 CSS 效果答案

【问题标题】：SVG FontAwesome does not take CSS effectSVG FontAwesome 不带 CSS 效果
【发布时间】：2019-10-17 13:53:35
【问题描述】：

我尝试将 CSS 样式添加到我的 fontawesome svg 但它没有生效。

这是我的 HTML 代码：

<section id="about">
<div class="container">
<ul>
<li>
<i class="fas fa-shipping-fast"></i>
<h3>Free Delivery</h3>
<p class="desc">text text text</p>
</li>
<li>
<i class="far fa-clock"></i>
<h3>Instant Delivery</h3>
<p class="desc">text text text</p>
</li>
<li class="support">
<i class="fas fa-phone-square"></i>
<h3>24/d/w Support</h3>
<p class="desc">text text text</p>
</li>
<li class="customers">
<i class="far fa-thumbs-up"></i>
<h3>Customer Satisfaction</h3>
<p class="desc">text text text</p>
</li>
</ul>
</div>
</section>

这是 CSS 代码：

#about svg {
font-size: 50px;
float: right;
padding-right: 10px;
padding-left: 7px;
}

svg 的大小必须为 50 像素且右浮动，但正如您在我的屏幕截图中看到的那样，它不起作用 enter image description here

【问题讨论】：

svg 不支持 font-size .. 你需要使用 font-awesome 提供的类来增加大小
@TemaniAfif 令我惊讶的是，它似乎正在工作jsfiddle.net/y3rjaLzh（也在 FF 中测试过）。所以可能是一些height/width 约束导致了这种情况。
@MihaiT 嗯，他们使用 1em 单位作为基于字体大小的宽度，这就是原因。在这种情况下它适用于字体真棒但一般不

标签： css svg

【解决方案1】：

我相信你没有使用正确的选择器：

#about i {
font-size: 50px;
float: right;
padding-right: 10px;
padding-left: 7px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<section id="about">
<div class="container">
<ul>
<li>
<i class="fas fa-shipping-fast"></i>
<h3>Free Delivery</h3>
<p class="desc">text text text</p>
</li>
<li>
<i class="far fa-clock"></i>
<h3>Instant Delivery</h3>
<p class="desc">text text text</p>
</li>
<li class="support">
<i class="fas fa-phone-square"></i>
<h3>24/d/w Support</h3>
<p class="desc">text text text</p>
</li>
<li class="customers">
<i class="far fa-thumbs-up"></i>
<h3>Customer Satisfaction</h3>
<p class="desc">text text text</p>
</li>
</ul>
</div>
</section>

【讨论】：