代码之家  ›  专栏  ›  技术社区  ›  tilly

一个令人敬畏的字体图标不显示,尽管其他人这样做

  •  1
  • tilly  · 技术社区  · 6 年前

    .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>
    

    .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;
      }
    }
    
    1 回复  |  直到 6 年前
        1
  •  1
  •   tao    6 年前

    .fa 字体是v4。 .far

    对于两者中存在的所有图标,更改 far fa

    您可以查看 all v4.7 icons here .

    x.x 用正确的版本。