文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >怎样才能让这段代码显示有趣的图标呢？

问怎样才能让这段代码显示有趣的图标呢？
EN

Stack Overflow用户
提问于 2021-11-11 13:06:37
回答 3查看 84关注 0票数 2

我正在尝试在提供的服务旁边创建一些服务图标框。我已经用这种方法试过了，但是它不起作用。我认为字体棒的图标可以在这段代码中工作，但我对字体棒不是很了解。HTML和CSS已经包含在内，您将看到图标没有显示。

​

代码语言：javascript
复制
<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;
}
代码语言：javascript
复制
<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>

​

html
css
icons
EN

回答 3

Stack Overflow用户

发布于 2021-11-11 13:17:28

你的想法似乎完全正确，但Glyphicons与Font-Awesome没有任何关系。

确保将此行添加到页面的<head>中。

代码语言：javascript
复制
<script src="https://kit.fontawesome.com/d38a9ab6aa.js" crossorigin="anonymous"></script>

然后，您可以从此页面插入任何图标...https://fontawesome.com/v5.15/icons ...以同样的方式添加Glyphicons。

票数 1
EN

Stack Overflow用户

发布于 2021-11-11 15:03:12

若要占用空间较小(加载速度较快)，可以仅指定所需的图标。

-设置-

--用子文件夹'font-awesome‘创建文件夹'webfonts’

--在subforlder‘Font - files’中复制4个字体很棒的文件(见下文)

--在文件夹'webfonts‘中创建一个新文件'fontloader.css’

代码语言：javascript
复制
[webfonts]
    +-- [font-awesome]
    |       +-- fa-solid-900.svg
    |       +-- fa-solid-900.ttf
    |       +-- fa-solid-900.woff
    |       +-- fa-solid-900.woff2
    +-- fontloader.css

--将以下css插入到文件'fontloader.css‘中

代码语言：javascript
复制
/* 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;
}

--将css链接到您的html：

代码语言：javascript
复制
<link rel="stylesheet" href="URL/TO/webfonts/fontloader.css">

-每个图标-

--使用https://fontawesome.com/icons/搜索图标。

代码语言：javascript
复制
/* Example: an 'house' icon, search it */
/* then use the hex code in this way   */

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

--现在您可以将图标插入到html中。

代码语言：javascript
复制
<i class="fas fa-house-user"></i>
票数 1
EN

Stack Overflow用户

发布于 2021-11-11 13:14:18

我希望这个解决方案能对你有所帮助。格式不是很好，但我保留了你提供的HTML，并制作了图标来显示。

​

代码语言：javascript
复制
<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;
}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69928805

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档