Форум Сайтостроение Веб-строительство

svg в иконочных шрифтах

lutskboy
На сайте с 22.11.2013
Offline
185
lutskboy
100

приветствую

если скачать иконочный шрифт там код подключения такой

@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?90083503');
  src: url('../font/fontello.eot?90083503#iefix') format('embedded-opentype'),
       url('../font/fontello.woff2?90083503') format('woff2'),
       url('../font/fontello.woff?90083503') format('woff'),
       url('../font/fontello.ttf?90083503') format('truetype'),
       url('../font/fontello.svg?90083503#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

на странице используем .icon-smile:before { content: '\f118'; }

но если все убрать а оставить только svg то не работает

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

как его использовать?

WebAlt
На сайте с 02.12.2007
Offline
262
WebAlt
#1

Шрифты на основе SVG не поддерживаются и являются устаревшими:

https://www.chromestatus.com/feature/5930075908210688

https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

SVG (1.1) Fonts - Chrome Platform Status
  • www.chromestatus.com
Use the SVG based font format (that non WebKit based browsers never implemented) as a @font-face web font. Status in Chromium Blink components: Blink
lutskboy
На сайте с 22.11.2013
Offline
185
lutskboy
#2

а по другому как svg встроить? не как @font-face

.icon {
    background-image: url(../images/fontello.svg);
}

а дальше как?

megal
На сайте с 16.09.2008
Offline
120
megal
#3
нужно еще к .icon добавить высоту и ширину и вставляете в html <i class="icon"></i>

ну а вообще правильно делать иконки через svg sprite и тег use

<svg class="icon">
    <use xlink:href="img/sprite.svg#icon"></use>
</svg>
как генерировать спрайт в гугле информации полно
В Яндекс.Дисплее поменялись требования Google уточнил, какие форматы Google AdSense улучшил адаптивные

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