Проблема с указанными в коде ссылками!

[garrip91]

Здравствуйте, уважаемые форумчане!!!

Вчера разместил на сайте github.com учебный сайт "kinomonster" и вижу, что почему-то вместо значка "Лупы" на кнопке справа от поля с подсказкой "Ваш запрос" отображается какой-то непонятный квадратик.
И ЭТО ПРИТОМ, ЧТО НА САМОМ ПК в оффлайн-режиме (то есть, на ПК) значок "Лупа" нормально отображается!


Вот ссылка на главную страницу 'kinomonster'(index.html):

http://htmlpreview.github.io/?https:...ter/index.html


А вот так называемый РЕПОЗИТОРИЙ(хранилище папок с файлами):

https://github.com/garrip91/garrip91.github.io/

[Malleys]

почему-то вместо значка "Лупы" на кнопке справа от поля с подсказкой "Ваш запрос" отображается какой-то непонятный квадратик.

Так вы используете символ U+E003 <Private Use>, который может означать всё, что угодно (например, у меня есть шрифт, в котором он отображается как ромбик!), так что вам нужно к тому элементу загрузить и указать правильный шрифт. Но более лучший способ описан далее. (Лучший, поскольку символ как раз отображает лупу)

В Unicode существует две лупы. Вы можете использовать одну из них!

U+1F50D LEFT-POINTING MAGNIFYING GLASS 🔍
U+1F50E RIGHT-POINTING MAGNIFYING GLASS 🔎

Так что замените на это (А тот стыд и срам (потому что зависит исключительно от их шрифтов) от Bootstrap удалите, у вас больше половины не используется, те стили от Bootstrap, которые вставляются через скрипт)

.glyphicon-search:before {
    content: "🔎";
}

Это я исправил ваш пример! Хотя я тут подумал, а зачем такие сложности и такое нагромождение элементов. Ведь у вас это кнопка отправки, и получается, чтобы что -то поменять, сначала нужно посмотреть в HTML, увидеть, что там какая-то магия, пойти смотреть CSS, и ещё больше удивиться загадочному набору цифр... Делайте всё намного проще! Вот, кажется, всё в одном месте, что относится к кнопке поиска...

<button type="submit" class="btn btn-default btn-lg">🔎</button>

Сразу ведь понятно, что это такое?

[garrip91]

Здравствуйте, профессор!


Можно как-то более детально объяснить суть?
Если какие-то дополнительные шрифты нужны для корректной работы сайта, то какие именно и куда мне их загрузить??? Ведь, на ПК в оффлайн-режиме значок поиска нормально у меня работает...

А про 2-й вариант.... Ну тоже попрошу подробности: что, как и куда.

[Malleys]

Вот у вас есть 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>