SVG FontAwesome不带CSS效果

Question

我尝试将CSS样式添加到我的有趣的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;
}

svgs必须有50px的大小和正确的浮点，但正如你在我的屏幕截图中看到的，它不能工作enter image description here

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

​