Показать сообщение отдельно
  #4 (permalink)  
Старый 26.01.2019, 16:28
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Вот у вас есть HTML-код...
https://github.com/garrip91/garrip91...ndex.html#L122

на 122 строчке написано <button type="submit" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-search"></i></button>
т. е. там используется вот этот символ  (U+E003 <Private Use>) он у всех выглядит по разному (но в основном как missing glyph, квадратик или тофу) Для того, чтобы там была лупа, нужен шрифт, в котором этот глиф прорисован. Но я вам скажу, что такой подход не совсем удачный. Всё то время, пока шрифт загружается, вы видите квадратик. Если шрифт не загрузится, вы будете видеть квадратик! Чтобы такой проблем не было используйте соответствующий символ 🔍, который представлен в Unicode как лупа.

Я же вам написал, замените на <button type="submit" class="btn btn-default btn-lg">🔍</button>
И независимо от того, какой у вас шрифт, оно выглядит всегда как лупа!

А можно сделать свой шрифт с лупой, в котором прорисован U+1F50D LEFT-POINTING MAGNIFYING GLASS и даже добавить лигатуру для слова поиск. Совсем супер!

<style>

@font-face{
	font-family:Icon;
	src:url(data:application/font-woff2;base64,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);
}

button[type="submit"] {
	font: 1em Icon;
}

</style>

<button type="submit" class="btn btn-default btn-lg">поиск</button>
Ответить с цитированием