Значки шрифта не отображаются - PullRequest
Новая
       5

Значки шрифта не отображаются

0 голосов
/ 09 сентября 2018

Я использую шрифт, чтобы добавить кнопку социальных сетей на свой сайт. Я следую правилу, но значок не появляется это глава моего сайта 

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>oktavianusm</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" type="text/css">
<link href="fontawesome-free-5.3.1-web/css/fontawesome.min.css" rel="stylesheet" type="text/css">

и вот как мне это удалось в теле моего html 

<div class="social-media">
        <i class="fab fa-facebook-square"></i>
        <i class="fab fa-twitter-square"></i>
        <i class="fab fa-linkedin-square"></i>
        <i class="fab fa-google-plus-square"></i>
    </div>

и вот что происходит, когда я проверяю свой код в браузере

это то, что происходит, когда я выполняю элемент проверки и указываю курсором на код

Ответы [ 2 ]

0 голосов
/ 09 сентября 2018

У меня была такая же проблема. Ссылка периодически не загружалась в DOM. Для этого не было никаких очевидных причин, поэтому, чтобы обойти это, я добавил следующий код, чтобы вручную добавить ссылку. jQuery используется для добавления ссылки в заголовок. Если он уже существует, вы просто получаете дубликат. 

<!-- Font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Font awesome force load as was not loading -->
<script>
    $('head').append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">');
</script>

Я знаю, что это не очень хорошее решение, но оно работает. Я должен упомянуть, что эта ссылка для 4.7 Вам нужно изменить ее на любую версию, которую вы хотите.

0 голосов
/ 09 сентября 2018

Только что проверил сайт Font Awesome по адресу: https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css.

Вот правильная ссылка на таблицу стилей: 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" 
integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" 
crossorigin="anonymous">

Я искал их на моем веб-сайте.

...