文章/答案/技术大牛

发布

社区首页 >问答首页 >方图5图标没有显示在正常的HTML和CSS文件中？

问方图5图标没有显示在正常的HTML和CSS文件中？
EN

Stack Overflow用户

提问于 2021-10-13 09:36:22

回答 2查看 645关注 0票数 0

我正在制作简单的网站，我想把社交媒体的图标放在上面。

我去Fontawsome拿这些图标，但它们并没有出现在我的网站上。

下面是HTML：

    <head>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" 
      href="use.fontawesome.com/releases/v5.0.8/css/all.css">
    </head>


    <div id="social-menu">
          <div class="social-menu">
            <ul>
              <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li><a href="#"><i class="fa fa-instagram"></i></a></li>
            </ul>
          </div>
        </div>

下面是CSS：

.social-menu ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    margin: 0;
    display: flex;
}
.social-menu ul li {
    list-style: none;
    margin: 0 10px;
}
.social-menu ul li .fa {
    color: #000000;
    font-size: 25px;
    line-height: 50px;
    transition: .5s;
}
.social-menu ul li .fa:hover {
    color: #ffffff;
}

html

css

icons

font-awesome

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-10-13 10:13:05

确保您已经安装了Font，该包可以使用以下命令- npm install --save @fortawesome/fontawesome-free完成

或者使用CDN

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

票数 1

Stack Overflow用户

发布于 2021-10-13 10:31:19

在您的情况下首先使用字体可怕的CDN，如果已经使用了，然后将代码替换为fa替换为fab，然后正确地显示您的图标。

CDN：

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

代码：

<div id="social-menu">
    <div class="social-menu">
        <ul>
            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
            <li><a href="#"><i class="fab fa-instagram"></i></a></li>
        </ul>
    </div>
</div>

票数 0

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

原文链接：

https://stackoverflow.com/questions/69553067

复制

相似问题

问方图5图标没有显示在正常的HTML和CSS文件中？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问方图5图标没有显示在正常的HTML和CSS文件中？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问方图5图标没有显示在正常的HTML和CSS文件中？
EN