CODEWITHSUNDEEP
htmlcssicons
Connor
Connor

Reputation: 33

How can I get this code to show fontawesome icons?

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>

Upvotes: 2

Views: 1190

Answers (3)

bron
bron

Reputation: 1548

To have a small footprint (fast loading time), you may specify only icons you require.

------ Setup ------

-- Create folder 'webfonts' with subfolder 'font-awesome'

-- Copy 4 Font Awesome files (see below) in subforlder 'font-awesome'

-- Create a new file 'fontloader.css' in folder 'webfonts'

[webfonts]
    +-- [font-awesome]
    |       +-- fa-solid-900.svg
    |       +-- fa-solid-900.ttf
    |       +-- fa-solid-900.woff
    |       +-- fa-solid-900.woff2
    +-- fontloader.css

-- Insert the following css into file 'fontloader.css'

/* Font Awesome 5 Free */
@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    font-display: auto;
    src: url("../webfonts/font-awesome/fa-solid-900.woff2") format("woff2"),
         url("../webfonts/font-awesome/fa-solid-900.woff") format("woff"),
         url("../webfonts/font-awesome/fa-solid-900.ttf") format("truetype"),
         url("../webfonts/font-awesome/fa-solid-900.svg#fontawesome") format("svg");
}
.fas, .far, .fab, .fa {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    font-size: 1em;
    line-height: 1;
    text-rendering: auto;
}

-- Link the css to your html:

<link rel="stylesheet" href="URL/TO/webfonts/fontloader.css">

------ For each icon ------

-- Use https://fontawesome.com/icons/ to search icons.

/* Example: an 'house' icon, search it */
/* then use the hex code in this way   */

.fa-house-user:before {
    content: "\e065"
}

-- Now you can insert the icon into the html

<i class="fas fa-house-user"></i>

Upvotes: 1

D A
D A

Reputation: 2054

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>

Upvotes: 0

Cutey from Cute Code
Cutey from Cute Code

Reputation: 1134

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.

Upvotes: 1

Related Questions