Почему в моем якоре не отображаются значки Font Awesome?

Я знаю, кажется ли мой вопрос странным, но я обнаружил странное поведение при использовании fontawesome, обычно оно всегда проявляется, когда я использую его, и я уже прочитал Docs, и некоторые ответы, которые я здесь прочитал, не решают мою проблему

источник, который я уже пробовал:

Значки FontAwesome не отображаются. Почему?

почему некоторые значки с отличным шрифтом не отображаются < / а>

Font awesome не отображается значок

весь ответ там не решает мою проблему.

в таблице стилей я использую внешнюю ссылку от fontawesome

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

Вот что я хочу показать:

<div id="whatsapp-go"><a target="_blank" href="#"><i class="fab fa-whatsapp"></i></a></div>

<div id="back-to-top"><i class="fas fa-arrow-up"></i></div>

появляется только стрелка, но не со значком WhatsApp

значка не появляюсь

но когда я использую его в другом элементе, он отображается без проблем

noregE7RPgCLcBGAslows320">

вот код, отображаемый значком:

<ul class="footer-follow">
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fa fa-envelope-square fa-2x" alt="#"></i></a>
    </li>
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-whatsapp fa-2x"></i></a>
    </li>
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-instagram fa-2x"> </i></a>
    </li>
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-linkedin fa-2x"></i></a>
    </li>
    <li>
        <a class="icon-color btn-floating btn-sm mx-1" target="_blank" href="#"><i class="fab fa-youtube fa-2x"></i></a>
    </li>
</ul>

может кто-нибудь мне в этом помочь?

CSS файл:


/*------------------------------------*\
    Back to top
\*------------------------------------*/

#back-to-top {
    display:block;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #0bb89e;
    border-radius:50px;
    color: #FFF;
    z-index: 9999;
    -webkit-transition: 0.2s opacity;
    transition: 0.2s opacity;
    cursor: pointer;
}

#back-to-top:hover {
    opacity: 0.8;
}


/*------------------------------------*\
    Whatsapp-go
\*------------------------------------*/

#whatsapp-go {
    display:block;
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #0bb89e;
    border-radius:50px;
    color: #FFF;
    z-index: 9999;
    -webkit-transition: 0.2s opacity;
    transition: 0.2s opacity;
    cursor: pointer;
}

#whatsapp-go:hover {
  opacity: 0.8;
}

html css font-awesome-5
person Rakis Friski    schedule 21.02.2019    source источник
comment
Очевидно, библиотека загружается, и ваш синтаксис кажется правильным. Вам нужно будет создать полную демонстрацию, чтобы мы могли изучить ситуацию.   -  person isherwood    schedule 21.02.2019
comment
Можете ли вы предоставить полный код вашего CSS? Что-то не так.   -  person Dmitry S.    schedule 21.02.2019
comment
Я бы начал с цвета вашего якорного текста. Возможно, значок есть, но он соответствует фону. У вас должна быть возможность проверить это с помощью инспектора документов вашего браузера.   -  person isherwood    schedule 21.02.2019
comment
Я добавляю демо сайт в пост   -  person Rakis Friski    schedule 21.02.2019
comment
Я добавляю CSS для перехода наверху и whatsapp-go   -  person Rakis Friski    schedule 21.02.2019
comment
Это потому, что цвет фона круга и цвет ссылки такие же # 0bb89e. Измените цвет тега ссылки (а). Значок почти есть.   -  person Shihab    schedule 21.02.2019
comment
Вы правы, это моя вина, что я забыл о цвете моей внешней ссылки, большое спасибо, что решила мою проблему ^. ^   -  person Rakis Friski    schedule 21.02.2019

Ответы (1)


arrow_upward
2
arrow_downward

Просто значок WhatsApp является дочерним по отношению к тегу <a>, а ссылки имеют тот же зеленый цвет, что и фон:

введите здесь описание изображения

Установите белый цвет шрифта.

#whatsapp-go a {
  color: white;
}
person jerrylow    schedule 21.02.2019
comment
Большое спасибо! это моя вина, что я забыл о цвете внешней ссылки, похоже, проблема не в самом fontawesome - person Rakis Friski; 21.02.2019