如何调整现有HTML/CSS代码实现Font Awesome图标正常显示？

修复步骤 #

• 第一步：引入Font Awesome资源
  下载Font Awesome官方静态资源包到本地项目，在页面的<head>标签中引入包内的Font Awesome CSS文件即可。
• 第二步：修正现有CSS的语法错误
  现有CSS存在两处语法问题：
  1. .icon类中的color: #70AD4;色值缺少一位，改为合法色值#70AD47
  2. 选择器service-3 .service-box .y-us-content h4开头遗漏了类选择器的.，改为.service-3 .service-box .y-us-content h4
• 第三步：替换原图标代码
  原代码中使用的是Bootstrap的glyphicon图标类，要替换为Font Awesome的图标语法，示例如下：
  原来的代码：

  <span class="glyphicon glyphicon-cog icon"></span>
  

  替换为（以齿轮图标为例，可自行更换为其他Font Awesome图标类名）：

  <!-- Font Awesome 4.x 版本写法 -->
  <i class="fa fa-cog icon"></i>
  <!-- Font Awesome 6.x 免费版写法 -->
  <i class="fa-solid fa-gear icon"></i>
  

• 第四步：适配验证
  现有CSS中已经写了.service-3 .service-box .iconset i的样式，刚好匹配Font Awesome用<i>标签渲染图标的逻辑，无需额外调整即可复用现有样式。

修正后的完整CSS代码 #

.y-us-section {
  padding: 82px 0 82px;
}

.y-us-head {
  text-align: center;
  margin: 0 0 91px;
}

.y-us-title h2 {
  color: #000;
  font-size: 30px;
  letter-spacing: 0;
  line-height: 32px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.y-us-title>p {
  color: #777777;
  line-height: 22px;
}

.y-us-title-border {
  background: #006600 none repeat scroll 0 0;
  border-radius: 2px;
  display: inline-block;
  height: 3px;
  position: relative;
  width: 50px;
}

.service-3 .service-box {
  margin-bottom: 18px;
}

.service-3 .service-box .iconset {
  float: left;
  text-align: center;
  width: 25%;
}

.service-3 .service-box .iconset i {
  color: #000;
  font-size: 44px;
}

.service-3 .service-box .y-us-content {
  float: left;
  width: 75%;
}

/* 修复类选择器遗漏的. */
.service-3 .service-box .y-us-content h4 {
  color: #3a3a3a;
  font-size: 18px;
  letter-spacing: 0;
  line-height: 22px;
  margin: 14px 0 12px;
  text-transform: uppercase;
}

.service-3 .service-box .y-us-content p {
  color: #777777;
  font-size: 13px;
  font-weight: 300;
  line-height: 24px;
}

.icon {
  /* 修复非法色值 */
  color: #70AD47;
  padding: 0px;
  font-size: 40px;
  border: 1px solid #70AD47;
  border-radius: 100px;
  color: #000000;
  font-size: 28px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  width: 70px;
}

把页面内所有图标位置都按上述规则替换为Font Awesome的写法后，图标即可正常显示。

内容的提问来源于stack exchange，提问作者Connor