我正在尝试通过外部CSS减小 Font Awesome 方向箭头的宽度(我需要通过外部CSS来完成)。但是我无法增加字体大小，并且在通过内联CSS进行工作时很好
.fa-arrow-circle-left
{
color:red;
font-size:48px;
}<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1>fa fa-arrow-circle-left</h1>
<i class="fa fa-arrow-circle-left" ></i>
<br>
<!-- <p>Unicode:</p>
<i style="font-size:24px" class="fa"></i> -->
</body>
</html>最佳答案
好吧，所以我在 JSFiddle 中玩过这个发现你需要包装 <i class="fa fa-arrow-circle-left"></i>在 container 。对我来说，我使用了 <p>元素，但我确信这可以通过 <div> 来完成, <a> , <button>等
将图标包装到容器中后，您所需要做的就是将样式添加到容器中:
p {
color: red;
font-size: 50px;
}<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1>fa fa-arrow-circle-left</h1>
<p>
<i class="fa fa-arrow-circle-left"></i>
</p>
<br>
</body>
</html>关于html - 如何设计 Font Awesome 方向图标的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70907255/