Почему эти полезные глипиконы пикселируются, даже на веб-сайте W3Schools? Я пытаюсь использовать их и имею те же проблемы. В качестве примера см. glyphicon-search.
Я пробовал вращаться, сглаживать и т.д. Ничего не работает.
Если это отображается на собственном веб-сайте W3Schools - это "функция"? Должен ли я использовать некоторые другие маленькие значки? Вот пример - правильный вопрос - реальная проблема:
Почему глификоны W3Schools пикселированы?
Это не имеет никакого отношения к W3Schools, и название должно измениться (я думаю). Используйте инструменты разработчика, чтобы увидеть, что предоставленные ссылки загружают источники из CDN:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2
а не из W3Schools.
Итак, любые комментарии вроде: glyphicons из w3schools ужасны. Или, по крайней мере, больше пикселей, чем другие... ужасно ошибочны и вводят в заблуждение. Как отмечали другие, возможно, что-то другое вызывает это (драйвер видеокарты, настройки браузера, настройки монитора). Вы проверили разные устройства?
На моем ПК я также вижу разницу между Firefox и Chrome. Результат Chrome выглядит более гладко:
также: Векторные иконы Roundup | Сравнительное сравнение между популярными иконками
Нет ничего общего с этим w3cschool glypican:
Некоторые проблемы также существуют для этой проблемы, например,
Используйте правильный CDN вместо использования локального файла (js или css)
Неправильная загрузка глифика как @Deathstorm объясняет второй пункт в его ответе.
Вы можете увидеть эту демонстрацию, которую я скопировал из самой w3cschool, и она поддерживается в большинстве браузеров:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Music Glyph</h2>
<p>Music icon: <span class="glyphicon glyphicon-music"></span></p>
<p>Music icon as a link:
<a href="#">
<span class="glyphicon glyphicon-music"></span>
</a>
</p>
<p>Music icon on a button:
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-music"></span> Music
</button>
</p>
<p>Music icon on a styled link button:
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-music"></span> Music
</a>
</p>
</div>
</body>
</html> поскольку больше людей сказали уже, glyphicons из w3schools ужасны. Или по крайней мере больше пикселированных, чем другие.
Некоторые проблемы, которые могут вызвать эту проблему, следующие:
glyphicons. Вы можете проверить это, просмотрев консоль в своем браузере.glyphicons берутся.Источник, с которым я всегда пользовался и не имел никаких проблем, - это glyphicons из bootstrap Вы можете использовать эти glyphicons, добавив следующий код в свой заголовок:
<!-- Fonts and Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
Примечание.. Теперь могут быть более новые версии, вы можете найти сценарии здесь
примерный код загрузки глификона справа внизу:
<i class="fa fa-facebook-square" aria-hidden="true"></i>
Попробуйте использовать глификоны непосредственно из бутстрапа! Вот страница "Как использовать" в качестве загрузочного глификона: http://getbootstrap.com/components/#glyphicons-how-to-use Ссылка на страницу gliphicon находится прямо над ней.
Если это не решит проблему, я бы предложил шрифтовать. Я знаю, что fontawesome не является источником gliphicon, но он очень полезен.
Вот ссылка на шрифт awesome: http://fontawesome.io/
Надеюсь, это решает проблему!
Я не знаком с w3schools (потому что это ужасный ресурс, рекомендуется использовать https://developer.mozilla.org/en-US/).
Я предполагаю, что это изображения. Их код должен извлекаться из библиотеки небольших изображений. Это значительно замедлит загрузку вашего DOM, и я бы рекомендовал найти другой ресурс, чтобы получить эти значки!
Введите SVG
SVG - это масштабируемая векторная графика. Они представляют собой двумерную графику, которая никогда не будет пикселизироваться, они также могут переключаться с классами и псевдоклассами. Font-Awesome является фантастическим ресурсом для этих значков, зашел бы так далеко, чтобы сказать закладку!
Относительно конкретного "глифа", который вы указали как пикселированный. Здесь шрифт-удивительная версия!
http://fontawesome.io/icon/info-circle/
Все, что вам нужно, это внедренный код, который они отправляют вам по электронной почте, или вы можете загрузить свою библиотеку удержания (не рекомендуется).
Надеюсь, это поможет!
Вы можете использовать Шрифт Awesome. Его довольно простой и имеет хорошую коллекцию значков для всех целей.
Ознакомьтесь с руководством по началу работы здесь: Начало работы