Google Material Icons заблокирован

Роскомнадзор в попытке заблокировать telegram внес в реестр часть ip google среди которых есть от сервиса Google Material Icons и как следствие на всех темах использующих material icons "пустые квадраты" или системные названия иконки.

Есть предложения по исправлению ситуации? Может есть способ загрузить их локально, чтобы было не очень больно все переделывать

1 ответ

  • 1
    replicant 23 апреля 2018 09:52 #

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

    Инструкция http://google.github.io/material-design-icons/
    Качаем https://github.com/google/material-design-icons

    • +1
      Vladislav Vladislav 23 апреля 2018 13:57 #

      Будьте добры подробно описать процесс переезда на локальную загрузку на примере любой темы дизайн

      • +1
        replicant replicant 23 апреля 2018 14:27 #

        Допустим вы используете шрифтовые иконки. Скачиваете шрифты из каталога https://github.com/google/material-design-icons/tr... и подключаете их в CSS файл вашей темы дизайна как написано в инструкции, вставив в файл кусок кода см. ниже (можно даже в самое начало файла вставить), заменив в нем предварительно ссылки на ваш домен и полный путь к файлам шрифтов, которые вы скачали себе и залили в какой-нибудь каталог на сайт. Задача сводится к копированию-вставке текста и закачке нескольких файлов на сайт.

        @font-face {
          font-family: 'Material Icons';
          font-style: normal;
          font-weight: 400;
          src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
          src: local('Material Icons'),
            local('MaterialIcons-Regular'),
            url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
            url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
            url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
        }
        
        .material-icons {
          font-family: 'Material Icons';
          font-weight: normal;
          font-style: normal;
          font-size: 24px;  /* Preferred icon size */
          display: inline-block;
          line-height: 1;
          text-transform: none;
          letter-spacing: normal;
          word-wrap: normal;
          white-space: nowrap;
          direction: ltr;
        }

        Дальше уже используете в теме дизайна таким образом.

        <i class="material-icons">face</i>
        • +1
          Hell Yeah Hell Yeah 15 февраля 2020 20:20 #

          Здравствуйте, а если я к примеру хочу сделать так, то по какой то причине цифра 2 не отображается, подскажите, как быть в этом случае, добавлять еще один селектор? 

          <i class="material-icons">face 2</i>
        • +1
          Кирилл Загребнев Кирилл Загребнев 7 апреля 2020 20:01 #

          В локал что, достаточно просто указать название? или там тоже стоит путь указывать в директории.

          И на что ссылаются url в данном примере. Я спрашиваю, потому что локально подключить не удалось.

          • +1
            replicant replicant 7 апреля 2020 21:09 #

            Попробую объяснить максимально просто и популярно.
            В примере

            https://example.com

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

            В local указывается официальное наименование шрифта, который может быть развернут на вашем компьютере из TTF файла, скачанного из источника. Шрифты можно устанавливать и удалять в операционной системе по желанию. Иногда лучше иметь основные web-шрифты установленными локально. Это сильно упрощает в принципе использование всяких сайтов. Шрифты по популярности можно отсортировать тут https://google-webfonts-helper... и установить себе Топ-20. Они имеют конкретные наименования, которые указываются в local. Если у вас установлен такой шрифт, то иконки (символы) подгружаться будут не из сети, а браться из вашего шрифта в системе, что намного быстрее, но для чистоты подобные шрифты не советую ставить локально, т.к. коды иконок могут быть разные и переназначенные и вся таблица может "поехать" даже не конкретно на вашем сайте, а на любом другом, где таблица может быть сдвинута. Ставить надо шрифты, которые именно шрифты :) Иконочные лучше подгружать как подключаемые через font-face.

            Символы в установленном локально шрифте будут доступны в каком-нибудь текстовом редакторе типа Word или Writer вот так

            На сайте ixbt.com используется Roboto Condensed, но мой браузер его не скачивает даже, потому что он у меня установлен локально и вызывается т.к. прописан в local вебмастером ресурса. И вот иконочный сетап для этого ресурса грузится в woff2 формате. И он явно кастомный, т.к. минимизирован и собран только с нужным набором.

            Допустим у меня есть шрифт с иконками, собранный по заказу или скачанный в готовом виде. Я предпочитаю собирать шрифты для конкретного сайта, тогда набор будет минимальным и не придется тащить все 100500 символов. Обычно набор в 30-40 символов вписывается в 10 кБайт.

            Итак, создаю на хостинге папку font и загружаю его в эту директорию на сайт и подключаю примерно так. При этом local вообще не указываю, чтобы даже не инициировать ситуацию с подгрузкой с компа пользователя (вдруг у кого такой шрифт установлен, а у меня таблица переназначена)

            @font-face {
                  font-family: 'fontello';
                  src:  url('/font/fontello.woff2') format('woff2');
                  font-weight: normal;
                  font-style: normal;
            }

            Ну и дальше в css прописываю всякие вызовы нужных мне символов (это уже частные случаи)

            .fa-star:before { content: '\e800'; }
            .fa-sign-out:before { content: '\e801'; }
            .fa-star-empty:before { content: '\e802'; }
            .fa-star-half:before { content: '\e803'; }
            и т.д.

            В интернетах мильёны всяких руководств как подключать шрифты к сайту.
            Поищите примеры. Потренируйтесь. Там не сложно.

            Для тренировки даже не обязательно шрифт закачивать на сервер. Достаточно вашего браузера и скачанного демо-примера из сети. Нужно три файла. Шрифт, CSS и HTML. Всё. Если CSS вписан как style в HTML, то для полного понимания как это все работает и тренировки достаточно и двух файлов на вашем компьютере и браузера.

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите