Проблемы с использованием значков шрифтов с CSS

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

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

 FeifanZ29 окт. 2012 г., 22:35
Используйте его как обычный шрифт:font-face.com Выясните, какой символ соответствует значку, который вы хотите использовать (попробуйте Font Book / Character Viewer)
 Wil Prim29 окт. 2012 г., 23:01
спасибо за комментарии. inspire48, он работает, но будет ли он работать, даже если у пользователя не установлен этот шрифт? и бред, я посмотрю в эти спасибо
 Tim Medora29 окт. 2012 г., 23:15
fontello.com делает этот процесс простым (не аффилированным, просто довольным пользователем).
 Brad29 окт. 2012 г., 22:35
inspectelement.com/tutorials/go-beyond-web-safe-fonts-with-css3 Для чего это стоит, я бы рекомендовал против этого. Когда вы используете шрифт с иконками, у вас есть очень реальный текст за ним. Если это не текст, он не должен использовать шрифт. Всегда есть спрайты, векторные изображения и т. Д.

Ответы на вопрос(1)

Решение Вопроса

Перейти кШрифт Белка и скачать@font-face Комплект. Разархивируйте его, переименуйте в «шрифты» и поместите в тот же каталог, что и ваш HTML-файл.

Используйте это как ваш HTML-файл:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    @font-face {
    font-family: 'ModernPictogramsNormal';
    src: url('fonts/modernpics-webfont.eot');
    src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/modernpics-webfont.woff') format('woff'),
         url('fonts/modernpics-webfont.ttf') format('truetype'),
         url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    li {
      list-style-type: none;
    }
    [data-icon]:before {
      font-family: 'ModernPictogramsNormal';
      content: attr(data-icon);
      speak: none;
      padding:0 5px;
    }
    </style>
</head>
<body>
  <ul>
    <li data-icon="^">RSS</li>
    <li data-icon="*">Star</li>
    <li data-icon=".">Shopping Cart</li>
  </ul>
</body>
</html>

Вы должны увидеть это:

Вы катитесь!

Кроме того, чтобы узнать, какой персонаж использовать, ознакомьтесь с картой персонажей на сайте Font Squirrel.

 Ammar03 дек. 2014 г., 06:08
Как определить, какойdata-icon свойство для какого символа, тогда как у меня есть только файлы с некоторымиunicode атрибут и некоторое значение противd, Я не могу этого понять?
 Wil Prim29 окт. 2012 г., 23:13
Потрясающие! Так что просто для большего знания, почему в @ font-face так много url ()? Это ссылки на все их шрифты? или разные форматы?
 bookcasey29 окт. 2012 г., 23:34
Разные браузеры требуют / могут использовать различные типы файлов шрифтов (я знаю .eot для IE, .svg для iOS и т. Д.). Лучше всего включить их всех.

Ваш ответ на вопрос