【发布时间】：2021-11-11 13:06:36
【问题描述】：
我正在尝试在所提供的服务旁边创建一些服务图标框。我已经用这种方法尝试过，但是它不起作用。我认为 font-awesome 图标可以与此代码一起使用，但我对 font-awesome 了解不多。 HTML 和 CSS 已包含在内，您将看到图标未显示。
<style>.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: #70AD4;
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;
}<body>
<div class="y-us-section">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
<div class="y-us-head">
<div class="y-us-title">
</div>
</div>
</div>
</div>
<div style="clear: both">
<h3 style="float: left">Quality Assurance</h3>
<h3 style="float: right">Regulatory Affairs</h3>
</div>
<hr />
<br>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-content">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Quality Management Representative system</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Iso 13485 Implementation</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Internal Audits</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Suppiler Audits</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>CE Marking Files</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>UKCA Marking</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>PRRC</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="why-choose-banner">
<img src="http://themeinnovation.com/demo2/html/build-up/img/home1/why-choose.jpg" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="y-us-contentbox">
<div class="service-3">
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Biological Evaluation</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>Clinical Evaluation</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>EU Authorised Representative</h4>
<p></p>
</div>
</div>
</div>
<div class="service-box">
<div class="clearfix">
<div class="iconset">
<span class="glyphicon glyphicon-cog icon"></span>
</div>
<div class="y-us-content">
<h4>UK Responsible Person</h4>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>【问题讨论】：
-
你的项目中加入了 font-awesome 吗？
-
你好，Ramon，我的项目中有很棒的字体是的。
-
<span class="glyphicon glyphicon-cog icon"></span>应该是图标吗？ font awesome 为其图标使用不同的名称，他们提供的一个 cog 示例如下：<i class="fas fa-cog"></i>glyphicons 来自 bootstrap -
是的，它们应该是我尝试过引导程序的图标。但我使用的是字体真棒而不是引导程序，但我不确定如何输入字体真棒代码让它们工作。
-
当 font-awesome 已经安装时，你所要做的就是将
glyphicon glyphicon-cog icon之类的类替换为 font-awesome 类，你可以找到 here 你也可以使用 svg，unicode或他们提供的字形