时间戳

首页 > 解决方案 > 一个字体真棒图标没有显示，尽管其他人这样做

html - 一个字体真棒图标没有显示，尽管其他人这样做

问题描述

我想添加某种字体真棒图标（fa-arrow-alt-circle-down），但它没有显示。我从网站上复制了这些课程并将它们输入到我的 HTML 中。我之前尝试过其他图标，它们没有问题。有时我更改.far为.fa，但现在这也不起作用。有人能看出为什么吗？

<div class="jumbotron jumbotron-fluid">
            <h1 class="heading-primary heading-primary--main"> Wizard's unite fans</h1>
              <div class="navigation-container">
                <button class="find-locals-nav-btn">Find Local players</button>
                <button class="forum-nav-btn">Forum</button>
                <button>login / register</button>
              </div>
              <i class="far fa-arrow-alt-circle-down"></i>

    </div>

SCSS 文件

.jumbotron {
  height: 100vh;
  background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
  ), url("https://i.amz.mshcdn.com/-7R3bLC1xTVhrjc86pBeYAogXFY=/950x534/filters:quality(90)/https%3A%2F%2Fblueprint-api-production.s3.amazonaws.com%2Fuploads%2Fcard%2Fimage%2F760683%2F2117d274-d2cf-46b9-b60c-698d65361438.jpg");
  background-size: cover;
  position: relative;
  padding: 5rem;
  margin-bottom: 2rem;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;

  .heading-primary {
    opacity: .8;
  }

  @include respond(phone) {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90vh, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 90vh, 0 100%);
    background-position: center top;
  }

  .navigation-container {
    border-radius: 20px;
    background-color: #fff;
    font-size: 2rem;
    width: 70%;
    margin: 4rem auto 0 auto;
    display: flex;
    text-align: center;
    justify-content: center;
    padding: 1rem;
    background-image: linear-gradient(to bottom right, #ccc, #666);

    > * {
      background-color: transparent;
      border: none;
      flex: 1 0 0;
      cursor: pointer;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 1px;

      &:hover {
        transform: translateY(-.2rem);
      }

      &:not(:last-child) {
        border-right: 1px solid #444;
      }
    }
  }

  .fa-arrow-alt-circle-down {
    font-size: 4rem;
    color: #fff;
  }
}

标签： htmlcss

解决方案

.fa字体真棒是 v4。.far是 v5。

对于两者中存在的所有图标，更改far为即可fa。对于 v5 中添加的那些，显然不会，因为它们在 v4 中不存在。

您可以在此处查看所有 v4.7 图标。

对于未来的通知，查找特定版本的 FA 图标是通过搜索“font awesome xx cheatsheet”。替换x.x为正确的版本。

推荐阅读