I am trying to create some service icon boxes next to the services that are provided. I have tried it in this method however it does not work. I think font-awesome icons could work with this code but I don't know much about font-awesome. The HTML and CSS have been included and you will see that the icons are not being shown.
<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>CodePudding user response：
I hope this solution will help you. The format is not nice, but I kept your HTML as you provided and made the icons to show up.
<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:20px;
border-radius: 100px;
color: #000000;
font-size: 28px;
height: 20px;
line-height: 20px;
text-align: center;
width: 20px;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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="fa fa-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="fa fa-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="fa fa-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="fa fa-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="fa fa-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="fa fa-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="fa fa-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="fa fa-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="fa fa-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="fa fa-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="fa fa-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>CodePudding user response：
You seem to have exactly the right idea but Glyphicons are nothing to do with Font-Awesome.
Ensure that this line is added to the <head> of your page.
<script src="https://kit.fontawesome.com/d38a9ab6aa.js" crossorigin="anonymous"></script>
Then you can insert any icon from this page.... https://fontawesome.com/v5.15/icons ... In the same way you added the Glyphicons.