fiametta
@fiametta
web-designer

Как лучше всего верстать векторные иконки?

Хочется верстать все иконки векторно, но столкнулась с проблемой.
Обычно конвертировала в шрифт на icomoon.io. Очень удобно, можно на лету менять цвет. Но вот незадача, в некоторых браузерах этот шрифт не отображается. Причем варианты неожиданные - не только в IE, но и в хроме бывает. В IE9 практически всегда с этим проблемы. Так и не поняла от чего зависит. Может от версии браузера.
Вставка чистым svg мне не очень нравится. Привыкла к дримвиверу, а там если вставлять через svg файл, то в панели файлов проекта каждый svg подтягивается как отдельный файл. В итоге имеем простыню файлов, среди которых до нужного style.css еще поди доберись.

Может быть есть другие непробиваемые и удобные способы?
  • Вопрос задан
  • 872 просмотра
Пригласить эксперта
Ответы на вопрос 3
grigruss
@grigruss
Пока не задал ни одного вопроса... только отвечаю.
Я как раз пользуюсь svg, и такая проблема была. Если шрифт не отображается, значит в компьютере просто нет этого шрифта. Лучше взять за правило использовать только Arial и Times New Roman. Если нужно другой шрифт, то конвертировать его в кривые, тогда иконка будет шрифтонезависимой и откроется на любой машине.
Ответ написан
fiametta
@fiametta Автор вопроса
web-designer
Пожалуй пока самым оптимальным мне кажется этот вариант:
.icon {
background-image: url(your.png); /* PNG для IE6-8 */
background-image: url(your.svg), none;
}
Ответ написан
pashakiz
@pashakiz
web dev
А можно увидеть примеры не работающего (не верно работающего) icomoon.io?
Я вот его использовал и еще ни разу не замечал никаких проблем с ним.

Может быть просто какой-то баг с подключением шрифта в CSS?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы