Адаптация ручки анимированных иконок социальных сетей в продукт

Question

Я пытаюсь реализовать на своем сайте анимированные иконки социальных сетей с использованием чистого CSS и без JS. Ручка, которую я обнаружил и пытаюсь адаптировать, называется " Еще один набор анимированных социальных иконок ".

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

Вот как это выглядит локально в моем веб-браузере .

Так что вы можете сами это увидеть, вот на моем веб-сервере: https://angeles4four.info/

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

В моей голове есть теги в моем index.html:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lora" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">

В моем файле CSS это:

@charset "UTF-8";
@font-face {
 font-family: 'icomoon';
 src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.eot?3qkin2");
 src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.eot?#iefix3qkin2") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.woff?3qkin2") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.ttf?3qkin2") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/icomoon.svg?3qkin2#icomoon") format("svg");
 font-weight: normal;
 font-style: normal;

Правильно ли настроено? Что мне не хватает? Я пытаюсь заставить иконки социальных сетей отображаться правильно (как они отображаются в исходном пере) вместо пустых прямоугольных глифов.

Answer 1

вы забыли добавить

https:

попробуйте это

 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">

Answer 2

Чтобы напомнить, как я получил эту работу, я сделал два изменения:

1. Предоставлено Хоссам Элмасрей , я добавил https: к одному из элементов ссылки в индексе.HTML.
2. Оказывается, мне не хватало шрифтов локальной системы.Так как Манджаро был моим местным O / S, я вызвал: sudo pacman -Ss ttf-liberation.Я не уверен, когда, как или почему отсутствовали эти шрифты, но шрифты Liberation установлены сейчас.

Затем я перезапустил свой браузер.При доступе к моему удаленному веб-сайту через Firefox и Chrome все иконки загружаются правильно.Ура!Но загрузка index.html из Chrome и Firefox непосредственно из моего локального файлового дерева не работает - что объясняется Connum , потому что веб-браузеры отключают внешнюю загрузку некоторого контента по соображениям безопасности.В дальнейшем я буду использовать локальный сервер тестирования .

Спасибо вам обоим за помощь.