Добавляет статью про иконочные шрифты by DrakesBot12 · Pull Request #5822 · doka-guide/content

DrakesBot12 · 2025-07-16T21:02:52Z

Описание

Добавляю статью про иконочные шрифты :^

Closes #454

Превью: https://content-5822.dev.doka.guide/html/iconic-fonts/

Чек-лист

Текст оформлен согласно руководству по стилю
Ссылки на внутренние материалы начинаются со слеша и заканчиваются слэшем либо якорем на заголовок (/css/color/, /tools/json/, /tools/gulp/#kak-ponyat)
Ссылки на картинки, видео и демки относительные (images/example.png, demos/example/, ../demos/example/)

TatianaFokina

Спасибоу!

html/iconic-fonts/index.md

html/iconic-fonts/demos/how-understand/index.html

Co-authored-by: Tatiana Fokina <fokinatatian@gmail.com>

Co-authored-by: baileys-li <47776594+baileys-li@users.noreply.github.com>

nasty23-star

Привет! Спасибо за полезный материал<3
Оставила комментарии, глянь, пожалуйста

html/iconic-fonts/index.md

github-actions · 2025-08-26T15:11:25Z

Превью контента из 3d6dae7 опубликовано.

nasty23-star

Спасибо!

solarrust

Привет!
Интересная статья-мнение получилась. Спасибо =)

Оставила пару предложений и небольшие правки по тексту. Посмотри, пожалуйста.

solarrust · 2025-10-07T07:57:33Z

html/iconic-fonts/index.md

+
+Иконка появляется на экране как будто это текст: она масштабируется через [`font-size`](/css/font-size/), окрашивается через [`color`](/css/color/) и ведёт себя как обычная буква.
+
+## Почему раньше это было популярно ✅


Suggested change

## Почему раньше это было популярно ✅

## Почему раньше это было популярно

В заголовках эмодзи утяжеляют и без того большой текст. Давай обойдёмся без них =)

solarrust · 2025-10-07T07:58:19Z

html/iconic-fonts/index.md

+
+Это было быстро и просто в эпоху, когда альтернатив почти не было.
+
+## Почему сегодня — нет ❌


Suggested change

## Почему сегодня — нет ❌

## Почему сегодня — нет

solarrust · 2025-10-07T08:00:33Z

html/iconic-fonts/index.md

+- Большой размер файла: шрифт содержит все иконки, даже если используете только несколько из них.
+- Плохой опыт разработки (_DX_): чтобы поправить иконку или добавить новую, вам нужны специализированные инструменты или сервисы. В то время как SVG код открывается во множестве графических редакторах и относительно легкочитаем для человека.
+- Несемантичность и потенциальные проблемы с SEO: Иконки, реализованные через шрифты, по сути являются текстом (псевдоэлементами [`::before`](/css/before/) с юникод-символами). Для поисковых систем этот текст является бессмысленным набором символов, который не несет полезной информации и может потенциально снижать качество выдаваемого контента, в отличие от семантически верной разметки с SVG.
+## Вывод


Suggested change

## Вывод

## Вывод

solarrust · 2025-10-07T08:01:40Z

html/iconic-fonts/practice/drakesbot12.md

@@ -0,0 +1,3 @@
+🛠 В старые времена использовались иконочные шрифты: подключение иконок занимало секунды. Однако, при добавлении многоцветных и анимированных иконок, ограничения шрифтов обнаруживались сразу.


Suggested change

🛠 В старые времена использовались иконочные шрифты: подключение иконок занимало секунды. Однако, при добавлении многоцветных и анимированных иконок, ограничения шрифтов обнаруживались сразу.

🛠 В старые времена использовались иконочные шрифты: подключение иконок занимало секунды. Однако при добавлении многоцветных и анимированных иконок ограничения шрифтов обнаруживались сразу.

solarrust · 2025-10-07T08:02:06Z

html/iconic-fonts/practice/drakesbot12.md

@@ -0,0 +1,3 @@
+🛠 В старые времена использовались иконочные шрифты: подключение иконок занимало секунды. Однако, при добавлении многоцветных и анимированных иконок, ограничения шрифтов обнаруживались сразу.
+
+Сейчас все уже давно перешли на SVG-спрайты, забыв про иконочные шрифты. После перехода на SVG-спрайты уменьшился размер загружаемого содержимого, расширились возможности кастомизации и улучшилась поддержка доступности через [`aria-label`](/a11y/aria-label/).


Тут спорно. Спрайты уже тоже прошлый век =)

@solarrust А почему кстати? Я знаю, что загрузка всего одним ресурсом уже не так актуальна с HTTP/2.
Но в целом что пришло на замену спрайтам/стэкам?

Я часто вижу что используют SVG и инлайнить иконки в JS код мне кажется кринжем

solarrust · 2025-10-07T08:02:48Z

html/iconic-fonts/demos/how-understand/index.html

+</head>
+<body>
+  <div class="container">
+    <span class="material-symbols-outlined" style="font-size: 3.6rem; color: #FF8630">search</span>


А что если нам вывести ручки для управления стилями текста и показать тем самым, что иконка тоже текст?

Добавляю статью про иконочные шрифты :^

e844399

DrakesBot12 requested review from Inventoris, ra1nbow1, skorobaeus and solarrust as code owners July 16, 2025 21:02

github-actions bot added html Контент по HTML статья Расширенный материал labels Jul 16, 2025

vitya-ne assigned DrakesBot12 Jul 17, 2025

vitya-ne changed the title ~~Добавляю статью про иконочные шрифты :^~~ Добавляет статью про иконочные шрифты Jul 17, 2025

Редачит

42d691e

TatianaFokina reviewed Aug 1, 2025

View reviewed changes

html/iconic-fonts/index.md Outdated Show resolved Hide resolved

html/iconic-fonts/index.md Outdated Show resolved Hide resolved

html/iconic-fonts/demos/how-understand/index.html Outdated Show resolved Hide resolved

DrakesBot12 and others added 6 commits August 2, 2025 00:12

Update html/iconic-fonts/demos/how-understand/index.html

af42832

Co-authored-by: Tatiana Fokina <fokinatatian@gmail.com>

Update html/iconic-fonts/index.md

13df0e3

Co-authored-by: Tatiana Fokina <fokinatatian@gmail.com>

Update index.md

16ecca3

Merge remote-tracking branch 'upstream/main' into html/iconic-fonts

ff99568

Правит мелочи

d42248e

Переносит совет в «На практике»

fddbb02

TatianaFokina self-requested a review August 4, 2025 11:39

TatianaFokina approved these changes Aug 4, 2025

View reviewed changes

This comment was marked as resolved.

Sign in to view

DrakesBot12 and others added 4 commits August 12, 2025 05:16

Делаем доку лучше :^

96bea56

Co-authored-by: baileys-li <47776594+baileys-li@users.noreply.github.com>

Делаем доку лучше :^

ed2154b

Co-authored-by: baileys-li <47776594+baileys-li@users.noreply.github.com>

Небольшие правки :^

876fedb

Merge branch 'main' into html/iconic-fonts

37be7bd

TatianaFokina requested a review from baileys-li August 13, 2025 13:09

baileys-li approved these changes Aug 14, 2025

View reviewed changes

nasty23-star requested changes Aug 24, 2025

View reviewed changes

html/iconic-fonts/index.md Outdated Show resolved Hide resolved

html/iconic-fonts/index.md Outdated Show resolved Hide resolved

Делаем доку лучше :^

3d6dae7

nasty23-star approved these changes Aug 27, 2025

View reviewed changes

ra1nbow1 approved these changes Sep 1, 2025

View reviewed changes

solarrust reviewed Oct 7, 2025

View reviewed changes


		Иконка появляется на экране как будто это текст: она масштабируется через [`font-size`](/css/font-size/), окрашивается через [`color`](/css/color/) и ведёт себя как обычная буква.

		## Почему раньше это было популярно ✅

	## Почему раньше это было популярно ✅
	## Почему раньше это было популярно


		Это было быстро и просто в эпоху, когда альтернатив почти не было.

		## Почему сегодня — нет ❌

	## Почему сегодня — нет ❌
	## Почему сегодня — нет

		@@ -0,0 +1,3 @@
		🛠 В старые времена использовались иконочные шрифты: подключение иконок занимало секунды. Однако, при добавлении многоцветных и анимированных иконок, ограничения шрифтов обнаруживались сразу.

		@@ -0,0 +1,3 @@
		🛠 В старые времена использовались иконочные шрифты: подключение иконок занимало секунды. Однако, при добавлении многоцветных и анимированных иконок, ограничения шрифтов обнаруживались сразу.

		Сейчас все уже давно перешли на SVG-спрайты, забыв про иконочные шрифты. После перехода на SVG-спрайты уменьшился размер загружаемого содержимого, расширились возможности кастомизации и улучшилась поддержка доступности через [`aria-label`](/a11y/aria-label/).

Comments

Conversation

DrakesBot12 commented Jul 16, 2025 • edited by TatianaFokina Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Описание

Чек-лист

Uh oh!

TatianaFokina left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as resolved.

Uh oh!

nasty23-star left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Aug 26, 2025

Uh oh!

nasty23-star left a comment

Choose a reason for hiding this comment

Uh oh!

solarrust left a comment

Choose a reason for hiding this comment

Uh oh!

solarrust Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

solarrust Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

solarrust Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

solarrust Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

solarrust Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

baileys-li Oct 8, 2025

Choose a reason for hiding this comment

Uh oh!

solarrust Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

DrakesBot12 commented Jul 16, 2025 •

edited by TatianaFokina

Loading