Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ собствСнного ΡˆΡ€ΠΈΡ„Ρ‚Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ IcoMoon ΠΈ Less

Π’ настоящСС врСмя использованиС Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² довольно популярно ΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ. ВсС основныС интСрфСйсныС срСды (Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Bootstrap , Foundation , Semantic UI , UIkit ΠΈ Pure ) ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Π²ΠΈΠ΄ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ². И это Π½Π΅ Π±Π΅Π· ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹. ИспользованиС Π·Π½Π°Ρ‡ΠΊΠ° ΡˆΡ€ΠΈΡ„Ρ‚Π° приносит нСсколько Π²Π°ΠΆΠ½Ρ‹Ρ… прСимущСств.

  • ВсС ΠΈΠΊΠΎΠ½ΠΊΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ Π² ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ», Ρ‡Ρ‚ΠΎ сокращаСт количСство запросов ΠΊ сСрвСру.
  • ВсС ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π»Π΅Π³ΠΊΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS, поэтому Π½Π΅Ρ‚ нСобходимости ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ графичСский Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€.
  • ВсС Π·Π½Π°Ρ‡ΠΊΠΈ выглядят Ρ‡Π΅Ρ‚ΠΊΠΈΠΌΠΈ ΠΈ Ρ‡Π΅Ρ‚ΠΊΠΈΠΌΠΈ Π½Π° всСх Π²ΠΈΠ΄Π°Ρ… дисплССв ΠΈ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ.

Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ я ΠΏΠΎΠΊΠ°ΠΆΡƒ Π²Π°ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ собствСнный ΡˆΡ€ΠΈΡ„Ρ‚ Π·Π½Π°Ρ‡ΠΊΠΎΠ², Π° Π·Π°Ρ‚Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для создания нСбольшой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ² CSS. По сути, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΡ…ΠΎΠΆ Π½Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈΠ· Π΄Ρ€ΡƒΠ³ΠΈΡ… популярных интСрфСйсных срСд, Π½ΠΎ с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ прСимущСствами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅.

Π—Π°Ρ‡Π΅ΠΌ ΠΌΠ½Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… Π·Π½Π°Ρ‡ΠΊΠΎΠ²?

Π˜Ρ‚Π°ΠΊ, ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свою ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΈΠΊΠΎΠ½ΠΎΠΊ вмСсто использования ΡƒΠΆΠ΅ созданных Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ FontAwesome ? ΠžΡ‚Π²Π΅Ρ‚ прост: Π²Ρ‹ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚Π΅ ΠΏΠΎΠ»Π½Ρ‹ΠΌ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π΅ΠΌ с самого Π½Π°Ρ‡Π°Π»Π° ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠ΅Ρ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ вашим ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ трСбованиям ΠΈ потрСбностям. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π½ΠΈΡ‡Π΅Π³ΠΎ лишнСго!

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ рассмотрим прСимущСства. Π’Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠ°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ:

  • Он ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π² сСбя Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈ Π½ΡƒΠΆΠ΄Π°Π΅Ρ‚Π΅ΡΡŒ.
  • Он ΠΌΠΎΠΆΠ΅Ρ‚ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ· Ρ€Π°Π·Π½Ρ‹Ρ… Π½Π°Π±ΠΎΡ€ΠΎΠ² ΠΈΠΊΠΎΠ½ΠΎΠΊ (Ρƒ IcoMoon App ΠΈΡ… ΠΌΠ½ΠΎΠ³ΠΎ).
  • Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»Π΅Π³ΠΊΠΎ настроСно (Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ / ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅).
  • Π­Ρ‚ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΡ€Ρ‚Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΈ Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½Ρ‹ΠΉ.
  • Π€Π°ΠΉΠ»Ρ‹ CSS ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π±ΡƒΠ΄ΡƒΡ‚ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ мСньшС ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ.

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, Π΅ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½ для создания собствСнной Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ. Π˜Ρ‚Π°ΠΊ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ сдСлаСм это.

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ прилоТСния IcoMoon

ΠœΡ‹ Π½Π°Π·ΠΎΠ²Π΅ΠΌ наш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Пикси. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΏΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ ΠΏΠ°ΠΏΠΊΡƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈ Π½Π°Π·Π²Π°Ρ‚ΡŒ Π΅Π΅ Pixie .

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€ΠΈΡˆΠ»ΠΎ врСмя ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ наш собствСнный ΡˆΡ€ΠΈΡ„Ρ‚ со Π·Π½Π°Ρ‡ΠΊΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ, ΠΊ ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, для Ρ‚Π°ΠΊΠΎΠ³ΠΎ инструмСнта, ΠΊΠ°ΠΊ IcoMoon App, просто кусок ΠΏΠΈΡ€ΠΎΠ³Π°. ЕдинствСнноС, Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, β€” это Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ встроСнный ΡˆΡ€ΠΈΡ„Ρ‚.

Допустим, ΠΌΡ‹ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ HTML, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π½Π°ΠΌ понадобятся Π·Π½Π°Ρ‡ΠΊΠΈ для рСдактирования тСкста ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Если ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ ΡˆΡ€ΠΈΡ„Ρ‚Π° с этими Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ, ΠΌΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ Ρ†Π΅Π»Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹. К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, Π² наш собствСнный ΡˆΡ€ΠΈΡ„Ρ‚ ΠΌΡ‹ помСстим Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ для нашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

Π˜Π΄ΠΈΡ‚Π΅ Π²ΠΏΠ΅Ρ€Π΅Π΄ ΠΈ ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ IcoMoon . Из Π½Π°Π±ΠΎΡ€Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ² IcoMoon Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ 22 Π·Π½Π°Ρ‡ΠΊΠ°, Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Π½Π° Π΄Π²ΡƒΡ… изобраТСниях Π½ΠΈΠΆΠ΅:

Когда ΠΎΠ½ΠΈ Π²Ρ‹Π±Ρ€Π°Π½Ρ‹, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π¨Ρ€ΠΈΡ„Ρ‚Β», Π° Π·Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒΒ».

ПослС icomoon.zip Ρ„Π°ΠΉΠ»Π° icomoon.zip ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ Π½Π΅ΠΌΡƒ ΠΈ Π΄Π²Π°ΠΆΠ΄Ρ‹ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΅Π³ΠΎ. Π—Π΄Π΅ΡΡŒ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠ°ΠΏΠΊΡƒ со ΡˆΡ€ΠΈΡ„Ρ‚Π°ΠΌΠΈ . Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²ΠΎΠ·ΡŒΠΌΠΈΡ‚Π΅ Π΅Π³ΠΎ ΠΈ распакуйтС Π² ΠΏΠ°ΠΏΠΊΡƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ ΡˆΠ°Π³Ρƒ.

ΠŸΠΎΡΡ‚Ρ€ΠΎΠΉΡ‚Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ с мСньшими Π·Π°Ρ‚Ρ€Π°Ρ‚Π°ΠΌΠΈ

Пока Ρ‡Ρ‚ΠΎ Ρƒ нас создан Π½ΠΎΠ²Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΈ ΠΏΡ€ΠΈΡˆΠ»ΠΎ врСмя ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ CSS. Для этого ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ МСньшС .

Π― Ρ€Π°Π·Π±ΠΈΠ» ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ, Π½Π° Ρ€Π°Π·Π΄Π΅Π»Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π·Π°ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Π·Π° Π΄Ρ€ΡƒΠ³ΠΈΠΌ, ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡΡΡŒ свСрху Π²Π½ΠΈΠ·. ΠœΡ‹ Π½Π°Ρ‡Π½Π΅ΠΌ с объявлСния Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π°ΠΌ понадобятся ΠΏΠΎΠ·ΠΆΠ΅. Π’ ΠΏΠ°ΠΏΠΊΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° создайтС Ρ„Π°ΠΉΠ»

pixie.less ΠΈ помСститС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ Π² Π½Π°Ρ‡Π°Π»ΠΎ Ρ„Π°ΠΉΠ»Π°.

 // Variables //=========== @icon-font-path: "fonts/"; @icon-font-name: "icomoon"; @font-size-big: 2em; @font-size-medium: 1.5em; @font-size-small: 0.75em; @icon-vertical-align: -15%; @color-success: green; @color-info: blue; @color-warning: orange; @color-danger: red; @linkbutton-color: #444; @linkbutton-background-color: #eee; 

Π”Π°Π»Π΅Π΅, ΠΏΠΎΠ΄ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΌ Π²Ρ‹ΡˆΠ΅ ΠΊΠΎΠ΄ΠΎΠΌ, помСститС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ миксины Less:

 // Mixins //======== . border-radius(@radius) { -webkit-border-radius: @radius; border-radius: @radius; } .box-shadow(@h: 0em; @v: 0em; @blur: 0em; @spread: 0.1em; @inset: inset) { -webkit-box-shadow: @arguments; box-shadow: @arguments; } .rotate(@angle) { -webkit-transform: rotate(@angle); -ms-transform: rotate(@angle); transform: rotate(@angle); } .scale(@x;@y) { -webkit-transform: scale(@x,@y); -ms-transform: scale(@x,@y); transform: scale(@x,@y); } .animation(@name; @duration: 2s; @iteration: infinite; @timing: linear) { -webkit-animation: @arguments; animation: @arguments; } .keyframes(@prefix) when (@prefix = webkit) { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } .keyframes(@prefix) when (@prefix = none) { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .keyframes(@prefix) { }

Наша ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Ρ€Π°Π±ΠΎΡ‚Π° Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π°. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ с Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ нашСй Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ. Нам Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ссылку Π½Π° наш Π½ΠΎΠ²Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚. =’pixie icon-‘] { font-family: ‘Pixie’; font-style: normal; font-weight: normal; font-variant: normal; line-height: 1; display: inline-block; padding: 0.3em 0.3em; margin: 0em 0.1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ заявлСнный Π²Ρ‹ΡˆΠ΅ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈ устанавливаСм Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ типографскиС свойства. Для ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΉ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π²Π°ΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ для свойства display

Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ inline-block . ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ margin свойства padding ΠΈ margin Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ мСста. НаконСц, ΠΌΡ‹ добавляСм Π΄Π²Π΅ послСдниС строки для Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π° ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΈ Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… устройствах.

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ Π² нашСм ΡˆΡ€ΠΈΡ„Ρ‚Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Ссли ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½ΠΈΡ… появился. Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π΅ ΠΌΡ‹ сопоставляСм классы Π·Π½Π°Ρ‡ΠΊΠΎΠ² с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°ΠΌΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ².

  .pixie.icon-pencil {&:before{content: "\e603";}} . pixie.icon-image {&:before{content: "\e60d";}} .pixie.icon-film {&:before{content: "\e613";}} .pixie.icon-quotes {&:before{content: "\e676";}} .pixie.icon-spinner {&:before{content: "\e67c";}} .pixie.icon-list {&:before{content: "\e6b5";}} .pixie.icon-numbered-list {&:before{content: "\e6b6";}} .pixie.icon-link {&:before{content: "\e6c3";}} .pixie.icon-spell-check {&:before{content: "\e700";}} .pixie.icon-bold {&:before{content: "\e744";}} .pixie.icon-underline {&:before{content: "\e745";}} .pixie.icon-italic {&:before{content: "\e746";}} .pixie.icon-strikethrough {&:before{content: "\e747";}} .pixie.icon-omega {&:before{content: "\e748";}} .pixie.icon-table {&:before{content: "\e74b";}} .pixie.icon-paragraph-left {&:before{content: "\e754";}} .pixie.icon-paragraph-center {&:before{content: "\e755";}} .pixie.icon-paragraph-right {&:before{content: "\e756";}} .
pixie.icon-paragraph-justify {&:before{content: "\e757";}} .pixie.icon-indent-increase {&:before{content: "\e758";}} .pixie.icon-indent-decrease {&:before{content: "\e759";}} .pixie.icon-code {&:before{content: "\e75c";}}

Иногда Π½Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ Π² качСствС ссылки ΠΈΠ»ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΌΡ‹ добавляСм ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π΅Π»Π°Π΅Ρ‚ Π·Π½Π°Ρ‡ΠΎΠΊ ΠΏΠΎΡ…ΠΎΠΆΠΈΠΌ Π½Π° ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ ΠΎΠ±Π΅Ρ€Π½ΡƒΡ‚ Ρ‚Π΅Π³ΠΎΠΌ

<a></a> , ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅:

  a>.pixie.linkbutton { background-color: @linkbutton-background-color; color: @linkbutton-color; .border-radius(100%); -webkit-box-shadow: none; box-shadow: none; } a>.pixie.linkbutton:hover { background-color: darken(@linkbutton-background-color, 5%); } 

Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΌΡ‹ создадим Π΅Ρ‰Π΅ Π΄Π²Π° способа ΠΈΡ… отобраТСния. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Ρ‚ΠΈΠΏ добавляСт ΠΊΡ€ΡƒΠΆΠΎΠΊ Π²ΠΎΠΊΡ€ΡƒΠ³ Π·Π½Π°Ρ‡ΠΊΠ°, Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ добавляСт ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚.

  .pixie.circular { .border-radius(100%); .
box-shadow(); } .pixie.square { .box-shadow(); }

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΈ Π±Ρ‹Π»ΠΈ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.

  .pixie.big { font-size: @font-size-big; vertical-align: @icon-vertical-align; } .pixie.medium { font-size: @font-size-medium; vertical-align: @icon-vertical-align; } .pixie.small { font-size: @font-size-small; } 

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ€ΡƒΡˆΠΈΡ‚ΡŒ ΠΌΠΎΠ½ΠΎΡ‚ΠΎΠ½Π½ΠΎΡΡ‚ΡŒ, ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠ°ΠΌ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ†Π²Π΅Ρ‚Π°Ρ….

  .success { color: @color-success; } .info { color: @color-info; } .warning { color: @color-warning; } .danger { color: @color-danger; }

НСкоторыС Π·Π½Π°Ρ‡ΠΊΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠ΅Ρ€Π΅Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π»ΡƒΡ‡ΡˆΠ΅ соотвСтствовали нашим Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ трСбованиям. ΠœΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ эту Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

  .pixie.flipped-h { .scale(-1, 1); } .pixie.flipped-v { .scale(1, -1); } 

Если Π½Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ стрСлки, ΠΌΡ‹ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ всС Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ ΠΈΠ· Π½Π°Π±ΠΎΡ€Π° ΠΈΠΊΠΎΠ½ΠΎΠΊ. Π›ΡƒΡ‡ΡˆΠΈΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠΌ Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΡ‚ΡŒ Π΅Π³ΠΎ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Π·Π½Π°Ρ‡ΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ³Ρ€Π°Ρ‚ΡŒ Ρ€ΠΎΠ»ΡŒ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ…, Ρ‡Ρ‚ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°. ΠœΡ‹ сдСлаСм это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

  .pixie.rotated-right { .rotate(90deg); } .pixie.rotated-down { .rotate(180deg); } .pixie.rotated-left { .rotate(-90deg); } 

НаконСц, ΠΌΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ заставляСт Π·Π½Π°Ρ‡ΠΎΠΊ Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ. Π­Ρ‚ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ прогрСсс.

  .pixie.spin { .animation(spin); } @-webkit-keyframes spin { .keyframes(webkit); } @keyframes spin { .keyframes(none); } 

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€ΠΈΡˆΠ»ΠΎ врСмя ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ наш Ρ„Π°ΠΉΠ» .css Π² .css . Π‘Π°ΠΌΡ‹ΠΉ быстрый способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это β€” Ссли Π²Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ с языком Less β€” ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ½Π»Π°ΠΉΠ½-компилятор, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ WinLess . ΠŸΡ€ΠΎΡΡ‚ΠΎ скопируйтС вСсь ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ pixie.less ΠΈ Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ Π΅Π³ΠΎ Π² Π»Π΅Π²ΡƒΡŽ панСль компилятора. Π—Π°Ρ‚Π΅ΠΌ Π½Π° ΠΏΡ€Π°Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ скомпилированный ΠΊΠΎΠ΄ CSS. Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ скомпилированный ΠΊΠΎΠ΄ ΠΈ Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ Π΅Π³ΠΎ Π² Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ» с ΠΈΠΌΠ΅Π½Π΅ΠΌ pixie.css ΠΈ помСститС Π² ΠΏΠ°ΠΏΠΊΡƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π’ΠΎΡ‚ ΠΈ всС.

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Prepros, для компиляции Π²Π°ΡˆΠΈΡ… Ρ„Π°ΠΉΠ»ΠΎΠ² .less .

Если Π²Ρ‹ рСгулярно Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ с Less ΠΈΠ»ΠΈ Π½Π°ΠΌΠ΅Ρ€Π΅Π½Ρ‹ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это Π»ΡƒΡ‡ΡˆΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚. Для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Prepros Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ это руководство Π½Π° SitePoint .

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ использования

Π£Ρ„. НаконСц тяТСлая Ρ€Π°Π±ΠΎΡ‚Π° сдСлана. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€ΠΈΡˆΠ»ΠΎ врСмя ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Π½Π°ΡˆΡƒ Ρ€Π°Π±ΠΎΡ‚Ρƒ.

Π’ ΠΏΠ°ΠΏΠΊΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° создайтС Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ» HTML с ΠΈΠΌΠ΅Π½Π΅ΠΌ pixie.html ΠΈ помСститС Π² Π½Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ:

 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>Pixie</title> <link rel="stylesheet" type="text/css" href="pixie.css"> </head> <body> <p><a href="#"><i></i></a></p> <p><i></i><i></i></p> <p><i></i><i></i><i></i><i></i></p> <p><i></i><i></i><i></i><i></i></p> <p><i></i><i></i>A mirror effect</p> <p><i></i>Life's Good<i></i></p> <p><i></i>Loading. ..</p> </body> </html> 

Когда Π²Ρ‹ ΠΎΡ‚ΠΊΡ€ΠΎΠ΅Ρ‚Π΅ Π΅Π³ΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ; Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, построСнныС ΠΈΠ· IcoMoon. Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΈΠΊΠΎΠ½ΠΊΠΈ выглядят ΠΈ Π²Π΅Π΄ΡƒΡ‚ сСбя довольно Ρ…ΠΎΡ€ΠΎΡˆΠΎ. Π˜Ρ‚Π°ΠΊ, ΠΏΠΎΠ·Π΄Ρ€Π°Π²Π»ΡΡŽ! Π’Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ создали ΠΈ ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎ протСстировали Π½ΠΎΠ²ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Π·Π½Π°Ρ‡ΠΊΠΎΠ² CSS.

ΠŸΠ Π˜ΠœΠ•Π§ΠΠΠ˜Π•. Если Ρƒ вас Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с Ρ„Π°ΠΉΠ»ΠΎΠΌ pixie.less ΠΈΠ»ΠΈ Π»ΡŽΠ±Ρ‹ΠΌ Π΄Ρ€ΡƒΠ³ΠΈΠΌ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‡ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ (Π²ΠΊΠ»ΡŽΡ‡Π°Ρ всС Ρ„Π°ΠΉΠ»Ρ‹) здСсь .

РСзюмС

Π’ Π½Π°Ρ‡Π°Π»Π΅ этого ΡƒΡ€ΠΎΠΊΠ° ΠΌΡ‹ ΡƒΠ²ΠΈΠ΄Π΅Π»ΠΈ, Ρ‡Ρ‚ΠΎ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· прСимущСств наличия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ Π³ΠΎΡ€Π°Π·Π΄ΠΎ мСньшиС Ρ„Π°ΠΉΠ»Ρ‹. Π”Π°Π²Π°ΠΉΡ‚Π΅ сдСлаСм быстрый экспСримСнт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ это. Π‘Π½ΠΎΠ²Π° ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ IcoMoon ΠΈ Π½Π° этот Ρ€Π°Π· Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ всС Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈΠ· Π½Π°Π±ΠΎΡ€Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ² IcoMoon. Π—Π°Ρ‚Π΅ΠΌ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈ снова ΠΈΠ·Π²Π»Π΅ΠΊΠΈΡ‚Π΅ ΠΏΠ°ΠΏΠΊΡƒ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², ΠΊΠΎΠ³Π΄Π° Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ этой ΠΏΠ°ΠΏΠΊΠΈ ΠΈ сравнитС Π΅Π΅ с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΠΎΠ΄Π½ΠΎΠΈΠΌΠ΅Π½Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠΈ Π² нашСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ Pixie. Π Π°Π·ΠΌΠ΅Ρ€ всСх Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈΠ· Π½Π°Π±ΠΎΡ€Π° IcoMoon составляСт 507 ΠšΠ‘, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ для Π½Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹, ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ 19 ΠšΠ‘. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΌΡ‹ сэкономили 488 ΠšΠ‘!

Π― надСюсь, Ρ‡Ρ‚ΠΎ этот нСбольшой ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π±Ρ‹Π» интСрСсным для вас, ΠΈ Π²Ρ‹ ΡƒΠ·Π½Π°Π»ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ. Π­Ρ‚ΠΎ всСгда вСсСло ΠΈ приятно ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Ρ†Π΅Π½Π½ΠΎΠ΅ с нуля. ΠŸΠΎΡ‚Ρ€Π°Ρ‚ΠΈΠ² Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° созданиС этой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ² CSS, ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ довольно ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ снова ΠΈ снова.

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ исходныС Ρ„Π°ΠΉΠ»Ρ‹

Icon Font Pack | 10 бСсплатных инструмСнтов для создания собствСнного Icon Font Pack

Icon Font Pack —

Π’ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½Π° колоссальной ΠΎΡ†ΠΈΡ„Ρ€ΠΎΠ²ΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ Π»Π΅ΠΆΠΈΡ‚ Π½Π° Π²Π΅Ρ€ΡˆΠΈΠ½Π΅ проСктирования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, прСдоставлСниС прСимущСств Π²Π°ΡˆΠ΅ΠΌΡƒ Π²Π΅Π±-сайту ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ слоТной Π·Π°Π΄Π°Ρ‡Π΅ΠΉ. Π‘Ρ‹Π²Π°Π΅Ρ‚ ΠΈ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ ваш Ρ€Ρ‹Π½ΠΎΠΊ ΠΈΠ΄Π΅ΠΉ ΠΈ стратСгий ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·Π±ΠΈΡ‚, Π½ΠΎ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ каТСтся, Ρ‡Ρ‚ΠΎ ΠΎΠ½ выглядит ΠΈΠ½Ρ‚Ρ€ΠΈΠ³ΡƒΡŽΡ‰ΠΈΠΌ. Π­Ρ‚ΠΎ ΠΊΠ°ΠΊ Ρ€Π°Π· Ρ‚ΠΎ, Π³Π΄Π΅ ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΡ‚ ΠΏΠ°ΠΊΠ΅Ρ‚ Icon Font!

Icon Font pack — это ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ содСрТат символы ΠΈ ΠΊΡ€ΠΎΡˆΠ΅Ρ‡Π½ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ для сопровоТдСния тСкста. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ Π±ΡƒΠΊΠ²Ρ‹ Ρ‚ΠΎΠΆΠ΅ ΠΊΠ°ΠΊ Π·Π½Π°Ρ‡ΠΎΠΊ ΡˆΡ€ΠΈΡ„Ρ‚Π°. ОсновноС Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠ°ΠΊΠ΅Ρ‚Π° ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² для Π·Π½Π°Ρ‡ΠΊΠΎΠ² состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ просто Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ этот ΡˆΡ‚Ρ€ΠΈΡ… ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Ρƒ. Они Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ вашим страницам ΠΎΡ‡Π΅Π½ΡŒ простым, Π½ΠΎ Ρ‡Ρ€Π΅Π·Π²Ρ‹Ρ‡Π°ΠΉΠ½ΠΎ эффСктивным способом.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ изобраТСния: pixabay.com

Наборы ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ основной ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт. ΠžΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ вСсти ΠΏΠ°ΠΊΠ΅Ρ‚ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ, Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ малСнькиС Π·Π½Π°Ρ‡ΠΊΠΈ слуТат для ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ части ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

Β«Π’Π°ΠΊ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π±Ρ‹ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ вмСсто этого изобраТСния?Β» Если это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ интСрСсно, ΠΎΡ‚Π²Π΅Ρ‚ прост: Π½Π°Π±ΠΎΡ€Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Icon ΠΎΡ‡Π΅Π½ΡŒ просты!

  • Они Π»Π΅Π³ΠΊΠΎ Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ ΠΈ Ρ†Π²Π΅Ρ‚Ρƒ
  • Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ Π·Π°Ρ‚Π΅Π½ΠΈΡ‚ΡŒ ΠΈΡ… Ρ„ΠΎΡ€ΠΌΡƒ
  • Π’Π°ΠΌ Π½Π΅Ρ‚ страха ΠΏΠΎΡ‚Π΅Ρ€ΡΡ‚ΡŒ качСство, ΠΊΠ°ΠΊ Π² случаС растровых ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ
  • Π£ Π½ΠΈΡ… ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹Π΅ Π½ΠΎΠΊΠ°ΡƒΡ‚Ρ‹
  • ВрСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ сокращаСтся Π±Π΅Π· ΡƒΡ‰Π΅Ρ€Π±Π° для внСшнСго Π²ΠΈΠ΄Π°.

Подводя ΠΈΡ‚ΠΎΠ³, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π½Π°Π±ΠΎΡ€Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π² основном ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠ΅. НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ бСсплатный Π½Π°Π±ΠΎΡ€, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ сами ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΡ… Π² соотвСтствии с вашими настройками, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ простыС инструмСнты.

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚ для создания собствСнного ΠΏΠ°ΠΊΠ΅Ρ‚Π° ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Icon

НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ 10 бСсплатных инструмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой собствСнный Π½Π°Π±ΠΎΡ€ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΈΠΊΠΎΠ½ΠΎΠΊ:

  1. Fontello

Fontello прСдоставляСт ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΡƒΡŽ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡƒ для простого создания ΠΏΠ°ΠΊΠ΅Ρ‚Π° ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² для ΠΈΠΊΠΎΠ½ΠΎΠΊ. Когда Π²Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚Π΅ Π²Π΅Π±-сайт, Π²Ρ‹ ΡƒΠΆΠ΅ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ ΡˆΠΈΡ€ΠΎΠΊΡƒΡŽ Π²ΡΡ‚Ρ€ΠΎΠ΅Π½Π½ΡƒΡŽ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ Π½Π°Π±ΠΎΡ€ΠΎΠ² ΠΈΠΊΠΎΠ½ΠΎΠΊ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ нСсколько ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ имя ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ прСфикс для Π²Π°ΡˆΠΈΡ… классов CSS. Но, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ для сСбя, процСсс довольно прост. ВсС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ваши ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ изобраТСния Π² Fontello. Π’ настоящСС врСмя поддСрТиваСтся Π΄Π²Π° Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°: изобраТСния SVG ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ SVG.

ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» SVG со своСго ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π° ΠΈ помСститС Π΅Π³ΠΎ Π½Π° панСль ΠΏΠΎΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ Β«ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Π·Π½Π°Ρ‡ΠΊΠΈΒ», ΠΈ всС Π³ΠΎΡ‚ΠΎΠ²ΠΎ!

  1. Icomoon

ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ icomoon позволяСт ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ тысячи ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² icomoon ΠΈΠ· ΠΈΡ… ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ собствСнный ΡˆΡ€ΠΈΡ„Ρ‚ icomoon. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ свой собствСнный SVG с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈΒ», ΠΈ ваши Π³Π»ΠΈΡ„Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² отсортированном Π²ΠΈΠ΄Π΅. ПослС этого Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΏΠ΅Ρ€Π΅ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΈ ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π³Π»ΠΈΡ„ΠΎΠ². Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой собствСнный ΡˆΡ€ΠΈΡ„Ρ‚ icomoon Π² этом ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ. Icomoon Ρ…Ρ€Π°Π½ΠΈΡ‚ всС ваши ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π² своСй ΡƒΡ‡Π΅Ρ‚Π½ΠΎΠΉ записи, Π½ΠΎ Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΊ Π½ΠΈΠΌ доступ Ρ‡Π΅Ρ€Π΅Π· ΠΎΠ±Π»Π°ΠΊΠΎ, Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΊΡƒΠΏΠΈΡ‚ΡŒ ΠΏΡ€Π΅ΠΌΠΈΡƒΠΌ-Π°ΠΊΠΊΠ°ΡƒΠ½Ρ‚.

  1. Icon Vault

Icon Vault — это супСр ΠΏΠ»Π°Π²Π½Ρ‹ΠΉ сайт ΠΈ ΠΎΡ‡Π΅Π½ΡŒ простой Π² использовании! Он ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ упорядочСнныС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ², Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Π½Π° ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Social ΠΈ iOS. Π£ вас Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой собствСнный ΡˆΡ€ΠΈΡ„Ρ‚, Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ² ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ настроСнный шаблон Π·Π½Π°Ρ‡ΠΊΠΎΠ². Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ваша ΠΏΠ°ΠΏΠΊΠ° zip Π³ΠΎΡ‚ΠΎΠ²Π°, просто ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ Π΅Π΅ Π² Ρ€Π°Π·Π΄Π΅Π» с надписью Β«ΠŸΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ сюда Ρ„Π°ΠΉΠ»Ρ‹ для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈΒ».

  1. Glyphter

Glyphter — это нСобычная ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°, которая привСтствуСт вас ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ сСткой символов, Π³Π΄Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Ρ‚Π°ΡΠΊΠΈΠ²Π°Ρ‚ΡŒ SVG-Ρ„Π°ΠΉΠ»Ρ‹. Π‘ΠΏΡ€Π°Π²Π° Π²ΠΈΠ΄Π½Π° ΠΎΠ±ΡˆΠΈΡ€Π½Π°Ρ сСтка ΠΈΡ… бСсплатных Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΡ…, сколько Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, ΠΈ просто ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒ ΠΈΡ… Π²Π»Π΅Π²ΠΎ. ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ собрали Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π² сСткС, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΈ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ…, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Β«Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π³Π»ΠΈΡ„ΠΎΠ²Β». ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΡ‚Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, просто Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° стрСлку Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈ вуаля! Π—Π°Π΄Π°Ρ‡Π° Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Π°.

  1. Pictonic Icon Font Pack конструктор

Π’ΠΎΡ‚ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π£ Pictonic Π΅ΡΡ‚ΡŒ Ρ€ΠΎΠ²Π½ΠΎ 362 бСсплатных Π·Π½Π°Ρ‡ΠΊΠ°, послС Ρ‡Π΅Π³ΠΎ с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ взимаСтся ΠΏΠ»Π°Ρ‚Π° Π² Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅ 0, 59 Π΄ΠΎΠ»Π»Π°Ρ€Π° Π·Π° Π·Π½Π°Ρ‡ΠΎΠΊ.

Π­Ρ‚ΠΎΡ‚ сайт нуТдаСтся Π² вашСй рСгистрации, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄ Π½ΠΈΠΌ. Π’ Π½Π΅ΠΌ насчитываСтся Π±ΠΎΠ»Π΅Π΅ 2700 ΠΈΠΊΠΎΠ½.

Π’Π΅Π±-сайт довольно эффСктивСн, ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠ· ΠΈΡ… ΡˆΠΈΡ€ΠΎΠΊΠΈΡ… ΠΈ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ располоТСнных ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ.

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹Π΅ курсы

  • Π‘Π΅Ρ€Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ курс ΠΏΠΎ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ бСзопасности
  • ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° Ruby on Rails
  • Онлайн курс ΠΏΠΎ CSS
  • ΠŸΠ°ΠΊΠ΅Ρ‚ обучСния HTML5 ΠΈ CSS3
  1. Fontastic

Π’Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½Ρ‹ΠΉ ΠΏΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²Ρ‹ΠΉ сайт с Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ 9000 Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²; ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ большС?

Для доступа ΠΊ систСмС создания ΠΈΠΊΠΎΠ½ΠΎΠΊ рСгистрация Π² Fontasic ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Π°. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΈΠ· списка ΠΈΡ… свободно доступных Π½Π°Π±ΠΎΡ€ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ², Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Octicons, Π·Π½Π°Ρ‡ΠΊΠΈ Steamline, Π·Π½Π°Ρ‡ΠΊΠΈ Foundation ΠΈ Ρ‚. Π”. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ свои собствСнныС Π·Π½Π°Ρ‡ΠΊΠΈ SVG. ПослС этого, послС наТатия Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Β«ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒΒ», Ρƒ вас Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈΠ»ΠΈ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² ΠΎΠ±Π»Π°ΠΊΠ΅ Π·Π½Π°Ρ‡ΠΊΠΎΠ². Π›ΡƒΡ‡ΡˆΠ°Ρ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒ этого Π²Π΅Π±-сайта Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΈ Ρ‚. Π”. Π‘Π²ΠΎΠΈΡ… Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π² любоС врСмя, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Fontastic.

  1. We Love Icon Font Pack

Как слСдуСт ΠΈΠ· названия, этот Π²Π΅Π±-сайт позволяСт Π²Π°ΠΌ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой собствСнный ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΈΠΊΠΎΠ½ΠΎΠΊ. Π’Π°ΠΌ прСдоставляСтся Π²Ρ‹Π±ΠΎΡ€ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ качСства создатСля ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π² Ρ‚ΠΎΠΌ числС Brandicon, Entypo, Font Awesome ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°Π±ΠΎΡ€ Π½Π° свой сайт. НаТмитС Β«Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒΒ», послС Ρ‡Π΅Π³ΠΎ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ встроСнный ΠΊΠΎΠ΄ ΠΈ смоТСтС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS для дальнСйшСй настройки своСй ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ!

  1. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΡˆΡ€ΠΈΡ„Ρ‚

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ вашСго собствСнного создатСля ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈΠΊΠΎΠ½ΠΊΠΈ стало Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ с этим сайтом. Он ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΡ€Π°Π·ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ кросс-браузСрная Ρ€Π°Π±ΠΎΡ‚Π°. Одна ΠΊΠΎΠΌΠ°Π½Π΄Π°, ΠΈ всС Π³ΠΎΡ‚ΠΎΠ²ΠΎ для создания Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² вмСстС с ΡΠΎΠΏΡ€ΠΎΠ²ΠΎΠΆΠ΄Π°ΡŽΡ‰ΠΈΠΌ Ρ„Π°ΠΉΠ»ΠΎΠΌ CSS ΠΈ ΠΏΡƒΠ»Π΅Π½Π΅ΠΏΡ€ΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΠΎΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ΠΉ стилСй с Π½ΠΈΠΌ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, стандартная конфигурация Π½Π΅ трСбуСтся ΠΈ Π½Π΅Ρ‚ нСобходимости ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ, учитывая Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ Π½Π°Π±Π»ΡŽΠ΄Π°Ρ‚Π΅Π»Ρ ΠΊΠΎΠΌΠ°Π½Π΄Π½ΠΎΠΉ строки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS с использованиСм соглашСния ΠΎΠ± ΠΈΠΌΠ΅Π½Π°Ρ… Bootstrap. Как это ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ?

  1. Font Awesome

Π­Ρ‚Π° ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°, бСзусловно, ΠΎΡ‚Π΄Π°Π΅Ρ‚ Π΄ΠΎΠ»ΠΆΠ½ΠΎΠ΅ своСму названию. Он прСдоставляСт простой Π² использовании интСрфСйс с бСсконСчной ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΡŒΡŽ, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ остаСтся Ρ‡Π΅Ρ‚ΠΊΠΈΠΌ ΠΈ Ρ‡Π΅Ρ‚ΠΊΠΈΠΌ ΠΏΡ€ΠΈ любом Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS для выполнСния всСх Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… дСйствий Π½Π°Π΄ Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², плюс ΠΎΠ½ совмСстим со всСми ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ чтСния с экрана ΠΈ всСми Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Bootstrap.

И Π»ΡƒΡ‡ΡˆΠ°Ρ Ρ‡Π°ΡΡ‚ΡŒ? Π­Ρ‚ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΈ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ бСсплатно для коммСрчСского использования!

  1. Pictos

Как Ρ€Π°Π· Ρ‚ΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ ΠΏΠΎΠ΄ΡƒΠΌΠ°Π»ΠΈ, Ρ‡Ρ‚ΠΎ это Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅, Pictos с трСском ΠΏΡ€ΠΎΠ±Ρ€Π°Π»Π°ΡΡŒ Π½Π° Π°Ρ€Π΅Π½Ρƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. Он ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Π² своСм навсСгда бСсплатном ΠΏΠ°ΠΊΠ΅Ρ‚Π΅. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ интСрфСйса Π² Π½ΠΎΠ²ΠΎΠΉ ΠΈ ΠΈΠ½Π½ΠΎΠ²Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ Redux ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚Ρ€ΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ.

  • Линия: ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΊΠΎΠ½Ρ‚ΡƒΡ€Ρ‹ Ρ„ΠΈΠ³ΡƒΡ€ ΠΈΠΊΠΎΠ½ΠΎΠΊ
  • Бплошной: Ρ„ΠΎΡ€ΠΌΡ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Ρ‹ сплошной Ρ‡Π΅Ρ€Π½ΠΎ-Π±Π΅Π»ΠΎΠΉ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ Ρ‚Π΅ΠΌΠΎΠΉ.
  • Π¦Π²Π΅Ρ‚Π°: всС ΠΈΠΊΠΎΠ½ΠΊΠΈ создатСля ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈΠΌΠ΅ΡŽΡ‚ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π°.

Π­Ρ‚ΠΈ Π·Π½Π°Ρ‡ΠΊΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Ρ€Π°Π·Π΄Π΅Π»ΡΡŽΡ‚ΡΡ Π½Π° ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ.

ΠŸΡ€Π΅ΠΆΠ΄Π΅ всСго, Pitcos Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ Π±Π΅Π·ΡƒΠΏΡ€Π΅Ρ‡Π½ΠΎΠ΅ качСство, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ каТдая ΠΈΠΊΠΎΠ½ΠΊΠ° Redux Π±Ρ‹Π»Π° Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°Π½Π° ΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½Π° Π² сСтку 24 x 24 для обСспСчСния максимальной ясности.

НСт нСобходимости Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Π΅Π±-интСрфСйс сдСлал большой скачок, благодаря ΡΠΎΠ·Π΄Π°Ρ‚Π΅Π»ΡŽ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ просто идСальноС сочСтаниС скромного, Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ, острого, ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ. По сути, ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² стилС сайта Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€Π΅ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΎ. Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡ‚Π΅ ΠΈ создайтС этот ΠΎΡ‡Π΅Π½ΡŒ эффСктный малСнький Π·Π½Π°Ρ‡ΠΎΠΊ ΡˆΡ€ΠΈΡ„Ρ‚Π°!

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ

Π­Ρ‚ΠΎ Π±Ρ‹Π»ΠΎ руководство ΠΏΠΎ Icon Font Pack — это ΡˆΡ€ΠΈΡ„Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ содСрТит символы ΠΈ ΠΊΡ€ΠΎΡˆΠ΅Ρ‡Π½ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡƒΡŽ для сопровоТдСния тСкста. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π±ΡƒΠΊΠ²Ρ‹ Π² Π²ΠΈΠ΄Π΅ Π·Π½Π°Ρ‡ΠΊΠΎΠ². Π­Ρ‚ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ внСшняя ссылка, относящаяся ΠΊ ΠΏΠ°ΠΊΠ΅Ρ‚Ρƒ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΈΠΊΠΎΠ½ΠΎΠΊ.

  1. 8 ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… совСтов — HTML5 ΠΏΡ€ΠΎΡ‚ΠΈΠ² Flash
  2. Π”ΠΎΠ»ΠΆΠ΅Π½ Π·Π½Π°Ρ‚ΡŒ Π£Π΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Π²Π²Π΅Π΄Π΅Π½ΠΈΠ΅ R Tool для Π°Π½Π°Π»ΠΈΡ‚ΠΈΠΊΠΈ
  3. 32 ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… инструмСнта Π°Π½Π°Π»ΠΈΡ‚ΠΈΠΊΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² отрасли
  4. Π£Π΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ руководство ΠΏΠΎ Android-прилоТСниям для ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π½Π° 2016 Π³ΠΎΠ΄
  5. Π£Π΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ вопросы ΠΈΠ½Ρ‚Π΅Ρ€Π²ΡŒΡŽ графичСского Π΄ΠΈΠ·Π°ΠΉΠ½Π°

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свои собствСнныС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Inkscape ΠΈ Icomoon

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ пСрсонализированных ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ Π΄ΠΎΡ€ΠΎΠ³ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния ΠΈΠ»ΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… худоТСствСнных способностСй. МоТно ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ собствСнныС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Inkscape Β ΠΈ IcoMoon , Π΄Π²Π΅ бСсплатныС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½Π° любом ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅.

Π˜Π½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΠΈ Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ относятся ΠΊ Inkscape вСрсии 0.92.4 для Windows, Mac ΠΈ Linux.

Π§Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ для создания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²

Inkscape β€” бСсплатная графичСская ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ для Windows, Mac ΠΈ Linux. IcoMoon β€” это Π²Π΅Π±-сайт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π²Π°ΠΌ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ собствСнныС  SVG-Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ ΠΈ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π² ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ бСсплатно. Inkscape Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ, ΠΏΠΎΠΊΠ° IcoMoon Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² любом Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Ни ΠΎΠ΄Π½Π° ΠΈΠ· ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΡƒΠΊΠ°Π·Π°Π»ΠΈ свой адрСс элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΡƒΡŽ Π»ΠΈΡ‡Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ

Помимо ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния, Π²Π°ΠΌ понадобится Ρ„ΠΎΡ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… нарисованных Π±ΡƒΠΊΠ² . Если Π²Ρ‹ ΡΠΎΠ±ΠΈΡ€Π°Π΅Ρ‚Π΅ΡΡŒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой собствСнный, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‚Π΅ΠΌΠ½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π½Ρ‹Π΅ Ρ‡Π΅Ρ€Π½ΠΈΠ»Π° ΠΈ Π±Π΅Π»ΡƒΡŽ Π±ΡƒΠΌΠ°Π³Ρƒ для сильного контраста ΠΈ сфотографируйтС Π·Π°ΠΊΠΎΠ½Ρ‡Π΅Π½Π½Ρ‹Π΅ Π±ΡƒΠΊΠ²Ρ‹ ΠΏΡ€ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΌ освСщСнии . ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΡΡ‚Π°Ρ€Π°ΠΉΡ‚Π΅ΡΡŒ ΠΈΠ·Π±Π΅Π³Π°Ρ‚ΡŒ Π»ΡŽΠ±Ρ‹Ρ… Π·Π°ΠΊΡ€Ρ‹Ρ‚Ρ‹Ρ… ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ² Π² ΠΏΠΈΡΡŒΠΌΠ°Ρ…, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Π±ΡƒΠΊΠ²Π° «О», Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ услоТнят процСсс ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠΈ Π²Π°ΡˆΠΈΡ… отслСТиваСмых писСм.

Если Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ свои собствСнныС Π±ΡƒΠΊΠ²Ρ‹, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ бСсплатныС изобраТСния Π°Π»Ρ„Π°Π²ΠΈΡ‚Π° ΠΎΠ½Π»Π°ΠΉΠ½. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ содСрТит всС символы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π·Π°Π³Π»Π°Π²Π½Ρ‹Π΅ ΠΈ строчныС Π±ΡƒΠΊΠ²Ρ‹ AZ.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ свои письма прямо Π² Inkscape. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ особСнно Ρ…ΠΎΡ€ΠΎΡˆΠΎ, Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅Β  ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ для рисования .

Mecaleha / Getty Images

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свои собствСнныС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Inkscape ΠΈ Icomoon:

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Inkscape ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β« Π€Π°ΠΉΠ»Β» > Β« Π˜ΠΌΠΏΠΎΡ€Ρ‚Β» .

  2. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ вашС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ .

  3. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ Π’ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½ рядом Image Import Type , Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ OK .

  4. Если ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ каТСтся слишком малСньким ΠΈΠ»ΠΈ большим Π² ΠΎΠΊΠ½Π΅, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² Β« Π’ΠΈΠ΄Β» > Β« ΠœΠ°ΡΡˆΡ‚Π°Π±Β»> Β«ΠœΠ°ΡΡˆΡ‚Π°Π± 1: 1Β», Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π²ΠΈΠ΄.

    Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° Π½Π΅Π³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ со стрСлками Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΡƒΠ³Π»Ρƒ, Π·Π°Ρ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ², удСрТивая ΠΊΠ»Π°Π²ΠΈΡˆΡƒ Ctrl ΠΈΠ»ΠΈ Command, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ исходныС ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ.

  5. УстановитС Ρ„Π»Π°ΠΆΠΎΠΊ рядом с Live Preview, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚. НастройтС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΏΠΎ своСму вкусу ΠΈΠ»ΠΈ ΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ значСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ОК .

    Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ с рисунком, Π²Π°ΠΌ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΡ‰Π΅ снова ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ снимок с Π»ΡƒΡ‡ΡˆΠΈΠΌ освСщСниСм, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с Π±ΠΎΠ»Π΅Π΅ ΡΠΈΠ»ΡŒΠ½Ρ‹ΠΌ контрастом.

  6. Когда трассировка Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½Π°, Π±ΡƒΠΊΠ²Ρ‹ появятся прямо Π½Π°Π΄ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠ΅ΠΉ. НаТмитС Π½Π° Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ Π΅Π΅ Π² сторону, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΄Π²Π° слоя, Π·Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β« Π£Π΄Π°Π»ΠΈΡ‚ΡŒΒ» Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π΅Π΅ ΠΈΠ· Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π’Ρ‹ ΠΎΡΡ‚Π°Π½Π΅Ρ‚Π΅ΡΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΊΠΎΠ½Ρ‚ΡƒΡ€Π°ΠΌΠΈ Π±ΡƒΠΊΠ².

  7. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² Path > Break Apart, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π±ΠΈΡ‚ΡŒ Π±ΡƒΠΊΠ²Ρ‹ Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ элСмСнты.

  8. НСкоторыС ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Π±ΡƒΠΊΠ²Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·Π±ΠΈΡ‚Ρ‹ Π½Π° нСсколько элСмСнтов. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ эти элСмСнты вмСстС, нарисуйтС Ρ€Π°ΠΌΠΊΡƒ Π²ΠΎΠΊΡ€ΡƒΠ³ Π½ΠΈΡ… с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта Β« Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅Β» , Π·Π°Ρ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² Β« ΠžΠ±ΡŠΠ΅ΠΊΡ‚Β» > Β« Π“Ρ€ΡƒΠΏΠΏΠ°Β» . Π£ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π±ΡƒΠΊΠ²Ρ‹ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ свой ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт, поэтому Π»ΡƒΡ‡ΡˆΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ символа.

  9. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² Π€Π°ΠΉΠ» > Бвойства Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° .

  10. УстановитС ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту Π΄ΠΎ 500 пиксСлСй .

  11. ΠŸΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ всС свои письма Π·Π° края страницы.

  12. ΠŸΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€Π²ΡƒΡŽ Π±ΡƒΠΊΠ²Ρƒ Π½Π° страницу, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±ΡƒΠΊΠ²Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½Π° Π·Π°Π½ΠΈΠΌΠ°Π»Π° Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ страницы.

    НС Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Ctrl ΠΈΠ»ΠΈ Command, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ исходныС ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ.

  13. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² Π€Π°ΠΉΠ» > Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ .

  14. Π”Π°ΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ»Ρƒ осмыслСнноС имя ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ .

    ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ сохранитС Ρ„Π°ΠΉΠ» Π² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ .svg .

  15. ΠŸΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ ΠΈΠ»ΠΈ ΡƒΠ΄Π°Π»ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€Π²ΡƒΡŽ Π±ΡƒΠΊΠ²Ρƒ, Π·Π°Ρ‚Π΅ΠΌ помСститС Π²Ρ‚ΠΎΡ€ΡƒΡŽ Π±ΡƒΠΊΠ²Ρƒ Π½Π° страницу ΠΈ повторяйтС процСсс, ΠΏΠΎΠΊΠ° каТдая Π±ΡƒΠΊΠ²Π° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ сохранСна ΠΊΠ°ΠΊ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Ρ„Π°ΠΉΠ» . svg.

  16. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Icomoon Π² Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β« Π˜ΠΌΠΏΠΎΡ€Ρ‚ Π·Π½Π°Ρ‡ΠΊΠΎΠ²Β» .

  17. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€Π²ΡƒΡŽ Π±ΡƒΠΊΠ²Ρƒ Π² вашСм Π½Π°Π±ΠΎΡ€Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ .

    Π˜ΠΌΠΏΠΎΡ€Ρ‚ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ сбою Icomoon, поэтому Π»ΡƒΡ‡ΡˆΠ΅ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡƒ.

  18. Когда Π²Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ символ, ΠΎΠ½ появится Π½Π° страницС. Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ ΠΈΡ… всС, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΅Π³ΠΎ, ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β« Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Β» Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΠ³Π»Ρƒ.

    Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΊΠ°Ρ€Π°Π½Π΄Π°Ρˆ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части страницы для дальнСйшСго рСдактирования ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… символов.

  19. ΠŸΡ€ΠΈΡΠ²ΠΎΠΉΡ‚Π΅ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ Π±ΡƒΠΊΠ²Ρƒ юникод-символу. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π² ΠΏΡ€Π°Π²ΠΎΠΉ части поля ΠΏΠΎΠ΄ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΌ Ρ„Π°ΠΉΠ»ΠΎΠΌ .svg ΠΈ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ символ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ²ΡΠ·Π°Ρ‚ΡŒ с Π½ΠΈΠΌ. Icomoon автоматичСски ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ΄. Когда Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΡ‚Π΅, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ .

Π Π°Π±ΠΎΡ‚Π° со ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ Awesome

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Font Awesome

Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ Awesome — это простой ΡˆΡ€ΠΈΡ„Ρ‚, содСрТащий Π² сСбС Π² мСсто Π±ΡƒΠΊΠ² символы ΠΈ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Π·Π½Π°ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π»Π΅Π³ΠΊΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΡ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· CSS ΠΏΠΎ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ ΠΊΠ°ΠΊ Π΄Π΅Π»Π°Π΅ΠΌ ΠΌΡ‹ это с простым ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ. Π’ΠΎ Π΅ΡΡ‚ΡŒ, ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ CSS ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ для Π½ΠΈΡ… Ρ†Π²Π΅Ρ‚, ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€, Π·Π°Π΄Π°Ρ‚ΡŒ Ρ‚Π΅Π½ΡŒ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.

Π’ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ΅ Font Awesome вСрсии 4.7.0 содСрТится 646 ΠΈΠΊΠΎΠ½ΠΎΠΊ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ для коммСрчСских ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Ρ‚Π°ΠΊ ΠΈ Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ использования Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ бСсплатно.

1. Как ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ Awesome

МоТно Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΄Π²Π° способа, это использованиС сторонних рСсурсов ΠΎΡ‚ ΠΊΡƒΠ΄Π° Π±ΡƒΠ΄Π΅ΠΌ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» font-awesome.css ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Ρ‡Π΅Ρ€Π΅Π· CSS ΠΈΠ»ΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ способ, это скачиваСм ΠΊ сСбС Π°Ρ€Ρ…ΠΈΠ² с ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ Awesome ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π΅Π³ΠΎ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ‚Π΅Π³Π° <link>. Π”Π°Π»Π΅Π΅Β Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· этих способов.

Бпособ 1

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ сторонниС сСрвисы CDNJS ΠΈΠ»ΠΈ BootstrapCDN.Β Π Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Π½Ρ‹ΠΉ Π½Π° Π½ΠΈΡ… Ρ„Π°ΠΉΠ» font-awesome.css ΠΌΡ‹ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Π΄Π°Π½Π½Ρ‹Ρ… строк:

Для ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ с CDNJS:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Для ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ с BootstrapCDN:

<link rel="stylesheet" href="https://maxcdn. bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² Ρ€Π°Π·Π΄Π΅Π» <head> ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π²Ρ‹ΡˆΠ΅ основного ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ style.css. ПослС Ρ‚ΠΎΠ³ΠΎ ΠΊΠ°ΠΊ Ρ„Π°ΠΉΠ» ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° своСм рСсурсС.

Бпособ 2

ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Π½Π° сайт Font Awesome, ΠΈ скачиваСм Π°Ρ€Ρ…ΠΈΠ² со ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ. Распаковав Π°Ρ€Ρ…ΠΈΠ² ΠΌΡ‹ ΡƒΠ²ΠΈΠ΄ΠΈΠΌΒ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΎ ΠΏΠ°ΠΏΠΎΠΊ. Для установки ΡˆΡ€ΠΈΡ„Ρ‚Π°Β Π½Π°ΠΌ понадобятся Π΄Π²Π΅ ΠΏΠ°ΠΏΠΊΠΈ это css ΠΈ ΠΏΠ°ΠΏΠΊΠ° fonts. Π—Π°ΠΊΠ°Ρ‡ΠΈΠ²Π°Π΅ΠΌ ΠΈΡ… Π½Π° свой сСрвСр Π³Π΄Π΅ располоТСн сайт, Ссли Π΅ΡΡ‚ΡŒ ΠΏΠ°ΠΏΠΊΠΈ с Ρ‚Π°ΠΊΠΈΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ, Ρ‚ΠΎ просто добавляСм ΠΈΠ· Π½ΠΈΡ… содСрТимоС. Π—Π°Ρ‚Π΅ΠΌ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Ρ„Π°ΠΉΠ» font-awesome.css ΠΈΠ»ΠΈ font-awesome.min.css ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ‚Π΅Π³Π° <link>, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΠ· ΠΏΠ°ΠΏΠΊΠΈ css нашСго сайта.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΏΠΎΠ»Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ:

<link rel="stylesheet" href="http://ваш_сайт/css/font-awesome.css">

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ:

<link rel="stylesheet" href="http://ваш_сайт/css/font-awesome.min.css">

2.

Как Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ Font Awesome

На Π²Π΅Π±-страницу ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ двумя способами, ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ способ это ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ класс ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π΅Π³ΠΎ для элСмСнта <i></i> ΠΈΠ»ΠΈ <span></span>, Π½ΠΎ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ класс fa ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΈΠ· элСмСнтов.

 <i></i>

Π’Ρ‚ΠΎΡ€ΠΎΠΉ способ, добавляСм ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ псСвдоэлСмСнтов ::before ΠΈ ::after, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ значСния свойства content для ΠΈΠΊΠΎΠ½ΠΊΠΈ. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌΒ font-family: FontAwesome ΠΈΠ½Π°Ρ‡Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚.

li:before {
content: "\f07a"; /* добавляСм ΠΈΠΊΠΎΠ½ΠΊΡƒ ΠΊΠΎΡ€Π·ΠΈΠ½Π° */
font-family: FontAwesome;
color: #aaaaaa;
margin-right: 10px; 
}
2.1. Как ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΡƒ

Π§Ρ‚ΠΎ Π±Ρ‹ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠΊΠΎΠ½ΠΊΠΈ достаточно Π² css ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒΒ font-size ΠΈ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€. Π’Π°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ классы fa-lg (ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ Π½Π° 33%),Β fa-2x, fa-3x, fa-4x ΠΈΠ»ΠΈ fa-5x.

fa-lg fa-2x fa-3x fa-4x fa-5x
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
2.2. Как Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈΠΊΠΎΠ½ΠΊΠΈ

Для фиксирования ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ класс fa-fw, Π·Π°Π΄Π°Π² Π΅Π³ΠΎ, ΠΌΡ‹ фиксируСм ΡˆΠΈΡ€ΠΈΠ½Ρƒ Ρ‚Π΅ΠΌ самым ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Ρ‚Π°ΠΊ ΠΈ для ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ списков.

<ul>
  <li><a href="#"><i></i> Главная</a></li>
  <li><a href="#"><i></i> ΠšΠ°Ρ€Ρ‚Π°</a></li>
  <li><a href="#"><i></i> ΠšΠ°Π±ΠΈΠ½Π΅Ρ‚</a></li>
  <li><a href="#"><i></i> Настройки</a></li>
</ul>
2.3. Как ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ списки LI ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ

Для Π·Π°ΠΌΠ΅Π½Ρ‹ стандартных ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠ² Π² Π±Π»ΠΎΠΊΠ΅ <ul>. ..</ul> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ классы fa-ul ΠΈ fa-li.

  • элСмСнт списка
  • элСмСнт списка
  • элСмСнт списка
  • элСмСнт списка
<ul>
  <li><i></i>элСмСнт списка</li>
  <li><i></i>элСмСнт списка</li>
  <li><i></i>элСмСнт списка</li>
  <li><i></i>элСмСнт списка</li>
</ul>
2.4. ΠšΠ°Π²Ρ‹Ρ‡ΠΊΠΈ для Ρ†ΠΈΡ‚Π°Ρ‚ ΠΎΠ±Ρ€Π°ΠΌΠ»Π΅Π½Π½Ρ‹Π΅ Π² Ρ€Π°ΠΌΠΊΠ΅

Π§Ρ‚ΠΎ Π±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°ΠΌΠΊΡƒ для ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ класс fa-border, Π° ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ pull-right ΠΈ pull-left ΠΌΠΎΠΆΠ΅ΠΌ добавят ΠΊΠ°Π²Ρ‹Ρ‡ΠΊΠΈ для тСкста.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien.

<i></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien.
<i></i>
2.5. АнимированныС ΠΈΠΊΠΎΠ½ΠΊΠΈ

Π§Ρ‚ΠΎ Π±Ρ‹ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ ΠΈΠΊΠΎΠ½ΠΊΡƒ достаточно Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс fa-spin для ΠΊΡ€ΡƒΠ³ΠΎΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ для ΠΏΡƒΠ»ΡŒΡΠΈΡ€ΡƒΡŽΡ‰Π΅ΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ fa-pulse. Π’Π°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ классы fa-spinner, fa-refresh, ΠΈ fa-cog.

fa-spin fa-cog fa-spin fa-spinner fa-spin fa-refresh fa-spin fa-circle-o-notch fa-pulse fa-spinner
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
2.6. ΠŸΠΎΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΎΡ‚Π·Π΅Ρ€ΠΊΠ°Π»ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ

Для ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚Π° ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ класс rotate-* Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ числовоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π° ΠΊΠ°ΠΊΠΎΠΉ градус ΠΈΠΊΠΎΠ½ΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Π΅Ρ€Π½ΡƒΡ‚Π°. Для Π·Π΅Ρ€ΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ отобраТСния ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π΄Π²Π° класса это fa-flip-horizontal Π΄Π»ΡΒ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΡ‚Π·Π΅Ρ€ΠΊΠ°Π»ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ icon-flip-vertical.

normal fa-rotate-90 fa-rotate-180 fa-rotate-270 fa-flip-horizontal fa-flip-vertical
<i></i> normal
<i></i> fa-rotate-90
<i></i> fa-rotate-180
<i></i> fa-rotate-270
<i></i> fa-flip-horizontal
<i></i> fa-flip-vertical
2.7. Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ

Иконки ΠΌΠΎΠΆΠ½ΠΎ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ накладывая ΠΈΡ… Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°, Ρ‚Π΅ΠΌ самым комбинируя ΠΈΡ… ΠΌΠ΅ΠΆΠ΄Ρƒ собой. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³Ρ€ΡƒΠΏΠΏΡƒ ΠΈΠ· ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π·Π°Π΄Π°Π΅ΠΌ класс для родитСля fa-stack. МоТно ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠΊΠΎΠ½ΠΊΠΈ, класс fa-stack-1x Π·Π°Π΄Π°Π΅Ρ‚ стандартный Ρ€Π°Π·ΠΌΠ΅Ρ€, Π° класс fa-stack-2x для увСличСния. Π’Π°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ классов fa-lg, fa-2x, fa-3x, fa-4x, ΠΈΠ»ΠΈ fa-5x.

fa-twitter Π½Π° fa-square-o fa-flag Π½Π° fa-circle fa-terminal Π½Π° fa-square fa-ban Π½Π° fa-camera
<span>
  <i></i>
  <i></i>
</span>
fa-twitter Π½Π° fa-square-o<br>
<span>
  <i></i>
  <i></i>
</span>
fa-flag Π½Π° fa-circle<br>
<span>
  <i></i>
  <i></i>
</span>
fa-terminal Π½Π° fa-square<br>
<span>
  <i></i>
  <i></i>
</span>
fa-ban Π½Π° fa-camera
2.8. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ использованиС ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² Bootstrap 3

Иконки Awesome прСкрасно Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π² Bootstrap ΠΈ это Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· Π΄Π°Π½Π½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ².

<a href="#">
  <i></i> Π£Π΄Π°Π»ΠΈΡ‚ΡŒ</a>
<a href="#">
  <i></i> Настройки</a>

<a href="#">
  <i></i> Font Awesome<br>ВСрсия 4.7.0</a>

<div>
  <a href="#">
    <i title="Align Left"></i>
  </a>
  <a href="#">
    <i title="Align Center"></i>
  </a>
  <a href="#">
    <i title="Align Right"></i>
  </a>
  <a href="#">
    <i title="Align Justify"></i>
  </a>
</div>

<div>
  <span><i></i></span>
  <input type="text" placeholder="Π’Π°Ρˆ Email">
</div>
<div>
  <span><i></i></span>
  <input type="password" placeholder="ΠŸΠ°Ρ€ΠΎΠ»ΡŒ">
</div>

<div>
  <a href="#"><i></i> ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ</a>
  <a data-toggle="dropdown" href="#">
    <span title="Toggle dropdown menu"></span>
  </a>
  <ul>
    <li><a href="#"><i></i> Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ</a></li>
    <li><a href="#"><i></i> Π£Π΄Π°Π»ΠΈΡ‚ΡŒ</a></li>
    <li><a href="#"><i></i> Π—Π°Π±Π°Π½ΠΈΡ‚ΡŒ</a></li>
    <li></li>
    <li><a href="#"><i></i> Π”Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²Π° администратора</a></li>
  </ul>
</div>

3.

Π“Ρ€ΡƒΠΏΠΏΡ‹ ΠΈΠΊΠΎΠ½ΠΎΠΊ

Π’ вСрсии Font Awesome 4.7 Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ Π½ΠΎΠ²Ρ‹Π΅ 41 ΠΈΠΊΠΎΠ½ΠΊΠ°. Иконки Ρ€Π°Π·Π±ΠΈΡ‚Ρ‹ Π½Π° Π³Ρ€ΡƒΠΏΠΏΡ‹ для ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΎΡ‚Π±ΠΎΡ€Π° ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ поиска ΠΈΠ»ΠΈ ΠΏΠΎ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Π£ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΊΠΈ прСдставлСн класс ΠΈ CSS ΠΊΠΎΠ΄ для вставки ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ свойства content.

3.1. Иконки для Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

fa-bath\f2cd

fa-id-card\f2c2

fa-id-card-o\f2c3

fa-envelope-open\f2b6

fa-envelope-open-o\f2b7

fa-id-badge\f2c1

fa-microchip\f2db

fa-podcast\f2ce

fa-shower\f2cc

fa-snowflake-o\f2dc

fa-thermometer-full\f2c7

fa-thermometer-empty\f2cb

fa-thermometer-quarter\f2ca

fa-thermometer-half\f2c9

fa-thermometer-three-quarters\f2c8

fa-thermometer-full\f2c7

fa-user-circle\f2bd

fa-user-circle-o\f2be

fa-user-o\f2c0

fa-window-close\f2d3

fa-window-close-o\f2d4

fa-window-maximize\f2d0

fa-window-restore\f2d2

fa-window-minimize\f2d

fa-address-book\f2b9

fa-address-book-o\f2ba

fa-address-card\f2bb

fa-address-card-o\f2bc

fa-adjust\f042

fa-anchor\f13d

fa-archive\f187

fa-arrows\f047

fa-asterisk\f069

fa-at\f1fa

fa-balance-scale\f24e

fa-ban\f05e

fa-bank\f19c

fa-barcode\f02a

fa-battery-empty\f244

fa-battery-half\f242

fa-battery-quarter\f243

fa-battery-three-quarters\f241

fa-battery-full\f240

fa-bed\f236

fa-beer\f0fc

fa-bell\f0f3

fa-bell-o\f0a2

fa-bell-slash\f1f6

fa-bell-slash-o\f1f7

fa-binoculars\f1e5

fa-birthday-cake\f1fd

fa-bolt\f0e7

fa-bomb\f1e2

fa-book\f02d

fa-bookmark\f02e

fa-bookmark-o\f097

fa-briefcase\f0b1

fa-bug\f188

fa-building\f1ad

fa-building-o\f0f7

fa-bullhorn\f0a1

fa-bullseye\f140

fa-calculator\f1ec

fa-calendar\f073

fa-calendar-check-o\f274

fa-calendar-minus-o\f272

fa-calendar-o\f133

fa-calendar-plus-o\f271

fa-calendar-times-o\f273

fa-cart-plus\f217

fa-cc\f20a

fa-certificate\f0a3

fa-clock-o\f017

fa-clone \f24d

fa-close\f00d

fa-cloud\f0c2

fa-cloud-download\f0ed

fa-cloud-upload\f0ee

fa-code\f121

fa-code-fork\f126

fa-coffee\f0f4

fa-comment\f075

fa-comment-o\f0e5

fa-commenting\f27a

fa-commenting-o\f27b

fa-comments\f086

fa-comments-o\f0e6

fa-compass\f14e

fa-copyright\f1f9

fa-creative-commons\f25e

fa-crop\f125

fa-crosshairs\f05b

fa-cube\f1b2

fa-cubes\f1b3

fa-cutlery\f0f5

fa-dashboard\f0e4

fa-database\f1c0

fa-desktop\f108

fa-diamond\f219

fa-download\f019

fa-edit\f044

fa-ellipsis-h\f141

fa-ellipsis-v\f142

fa-envelope\f0e0

fa-envelope-o\f003

fa-envelope-square\f199

fa-exclamation\f12a

fa-exclamation-circle\f06a

fa-exclamation-triangle\f071

fa-external-link\f08e

fa-external-link-square\f14c

fa-eye\f06e

fa-eye-slash\f070

fa-eyedropper\f1fb

fa-fax\f1ac

fa-film\f008

fa-filter\f0b0

fa-fire\f06d

fa-fire-extinguisher\f134

fa-flag\f024

fa-flag-checkered\f11e

fa-flag-o\f11d

fa-flash\f0e7

fa-flask\f0c3

fa-frown-o\f119

fa-futbol-o\f1e3

fa-gear\f013

fa-gears\f085

fa-gift\f06b

fa-glass\f000

fa-globe\f0ac

fa-graduation-cap\f19d

fa-group\f0c0

fa-hashtag\f292

fa-heart\f004

fa-heart-o\f08a

fa-heartbeat\f21e

fa-h-square\f0fd

fa-history\f1da

fa-home\f015

fa-hospital-o\f0f8

fa-hourglass\f254

fa-hourglass-start\f251

fa-hourglass-half\f252

fa-hourglass-end\f253

fa-hourglass-o\f250

fa-i-cursor\f246

fa-inbox\f01c

fa-industry\f275

fa-info\f129

fa-info-circle\f05a

fa-key\f084

fa-language\f1ab

fa-leaf\f06c

fa-legal\f0e3

fa-lemon-o\f094

fa-lightbulb-o\f0eb

fa-location-arrow\f124

fa-lock\f023

fa-magic\f0d0

fa-magnet\f076

fa-map\f279

fa-map-marker\f041

fa-map-o\f278

fa-map-pin\f276

fa-map-signs\f277

fa-medkit\f0fa

fa-meh-o\f11a

fa-microphone\f130

fa-microphone-slash\f131

fa-moon-o\f186

fa-mouse-pointer\f245

fa-music\f001

fa-navicon\f0c9

fa-newspaper-o\f1ea

fa-object-group\f247

fa-object-ungroup\f248

fa-paint-brush\f1fc

fa-paper-plane\f1d8

fa-paper-plane-o\f1d9

fa-paw\f1b0

fa-pencil\f040

fa-pencil-square\f14b

fa-pencil-square-o\f044

fa-percent\f295

fa-phone\f095

fa-phone-square\f098

fa-plug\f1e6

fa-power-off\xf011

fa-print\f02f

fa-puzzle-piece\f12e

fa-qrcode\f029

fa-question\f128

fa-question-circle\f059

fa-quote-left\f10d

fa-quote-right\f10e

fa-recycle\f1b8

fa-refresh\f021

fa-registered\f25d

fa-reply\f112

fa-reply-all\f122

fa-retweet\f079

fa-road\f018

fa-rss\f09e

fa-rss-square\f143

fa-search\f002

fa-search-minus\f010

fa-search-plus\f00e

fa-send\f1d8

fa-send-o\f1d9

fa-server\f233

fa-share\f064

fa-share-square\f14d

fa-share-square-o\f045

fa-shield\f132

fa-shopping-bag\f290

fa-shopping-basket\f291

fa-shopping-cart\f07a

fa-sign-in\f090

fa-sign-out\f08b

fa-signal\f012

fa-sitemap\f0e8

fa-sliders\xf1de

fa-smile-o\xf118

fa-soccer-ball-o\f1e3

fa-sort\f0dc

fa-sort-alpha-asc\f15d

fa-sort-alpha-desc\f15e

fa-sort-amount-asc\f160

fa-sort-amount-desc\f161

fa-sort-asc\f0de

fa-sort-desc\f0dd

fa-sort-numeric-asc\f162

fa-sort-numeric-desc\f163

fa-spoon\f1b1

fa-star\f005

fa-star-half\f089

fa-star-half-o\f123

fa-star-o\f006

fa-street-view\f21d

fa-suitcase\f0f2

fa-sun-o\f185

fa-support\f1cd

fa-tachometer\f0e4

fa-tag\f02b

fa-tags\f02c

fa-tasks\f0ae

fa-terminal\f120

fa-thumb-tack\f08d

fa-ticket\f145

fa-tint\f043

fa-trademark\f25c

fa-trash\f1f8

fa-trash-o\f014

fa-tree\f1bb

fa-trophy\f091

fa-tty\f1e4

fa-umbrella\f0e9

fa-unlock\f09c

fa-unlock-alt\f13e

fa-unsorted\f0dc

fa-upload\f093

fa-user\f007

fa-user-plus\xf234

fa-user-secret\f21b

fa-user-times\f235

fa-user-md\f0f0

fa-volume-down\f027

fa-volume-off\f026

fa-volume-up\f028

fa-warning\f071

fa-wifi\f1eb

fa-wrench\f0ad

3.
2. Иконки для людСй с ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΌΠΈ возмоТностями

fa-american-sign-language-interpreting\f2a3

fa-assistive-listening-systems\f2a2

fa-audio-description\f29e

fa-blind\f29d

fa-braille\f2a1

fa-deaf\f2a4

fa-low-vision\f2a8

fa-question-circle-o\f29c

fa-sign-language\f2a7

fa-tty\f1e4

fa-universal-access\f29a

fa-volume-control-phone\f2a0

fa-wheelchair\f193

fa-wheelchair-alt\f29b

3.3. Иконки Ρ€ΡƒΠΊΠ°

fa-hand-grab-o\f255

fa-hand-lizard-o\f258

fa-hand-paper-o\f256

fa-hand-peace-o\f25b

fa-hand-pointer-o\f25a

fa-hand-scissors-o\f257

fa-hand-spock-o\xf259

fa-hand-o-down\f0a7

fa-hand-o-left\f0a5

fa-hand-o-right\f0a4

fa-hand-o-up\f0a6

fa-thumbs-down\f165

fa-thumbs-o-down\f088

fa-thumbs-o-up\f087

fa-thumbs-up\f164

fa-handshake-o\f2b5

3.
4. Иконки для Ρ„ΠΎΡ€ΠΌ

fa-check-square\f14a

fa-check-square-o\f046

fa-circle\f111

fa-circle-o\f10c

fa-dot-circle-o\f192

fa-minus-square\f146

fa-minus-square-o\f147

fa-plus-square\f0fe

fa-plus-square-o\f196

fa-square\f0c8

fa-square-o\f096

3.5. Иконки для Π³Π°Π΄ΠΆΠ΅Ρ‚ΠΎΠ²

fa-mobile\f10b

fa-tablet\f10a

fa-television\f26c

fa-video-camera\f03d

fa-camera\f030

fa-camera-retro\f083

fa-hdd-o\f0a0

fa-headphones\f025

fa-laptop\f109

fa-gamepad\f11b

fa-keyboard-o\f11c

3.6. Иконки транспорт

fa-ambulance\f0f9

fa-bicycle\f206

fa-bus\f207

fa-car\f1b9

fa-fighter-jet\f0fb

fa-motorcycle\f21c

fa-plane\f072

fa-rocket\f135

fa-ship\f21a

fa-space-shuttle\f197

fa-subway\f239

fa-taxi\f1ba

fa-train\f238

fa-truck\f0d1

fa-wheelchair\f193

fa-wheelchair-alt\f29b

3.
7. Π“Π΅Π½Π΄Π΅Ρ€Π½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ

fa-child\f1ae

fa-female\f182

fa-male\f183

fa-genderless\f1db

fa-transgender\f224

fa-transgender-alt\f225

fa-mars\f222

fa-mars-double\f227

fa-mars-stroke\f229

fa-mars-stroke-h\f22b

fa-mars-stroke-v\f22a

fa-mercury\f223

fa-neuter\f22c

fa-venus\f221

fa-venus-double\f226

fa-venus-mars\f228

3.8. Π€Π°ΠΉΠ»ΠΎΠ²Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ

fa-folder\f07b

fa-folder-o\f114

fa-folder-open\f07c

fa-folder-open-o\f115

fa-file\f15b

fa-file-o\f016

fa-file-archive-o\f1c6

fa-file-audio-o\f1c7

fa-file-code-o\f1c9

fa-file-excel-o\f1c3

fa-file-image-o\f1c5

fa-file-movie-o\f1c8

fa-file-pdf-o\f1c1

fa-file-photo-o\xf1c5

fa-file-powerpoint-o\f1c4

fa-file-sound-o\f1c7

fa-file-video-o\f1c8

fa-file-word-o\f1c2

fa-file-zip-o\f1c6

fa-file-text\f15c

fa-file-text-o\f0f6

fa-files-o\f0c5

fa-image\f03e

fa-sticky-note\f249

fa-sticky-note-o\f24a

3.
9. Иконки Π²Π°Π»ΡŽΡ‚

fa-btc\f15a

fa-usd\f155

fa-euro\f153

fa-gbp\f154

fa-yen\f157

fa-money\f0d6

fa-ruble\f158

fa-rupee\f156

fa-shekel\f20b

fa-turkish-lira\f195

fa-won\f159

fa-gg\f260

3.10. Иконки ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… символов

fa-check\f00c

fa-check-circle\f058

fa-check-circle-o\f05d

fa-circle-thin\f1db

fa-check-square\f14a

fa-check-square-o\f046

fa-circle\f111

fa-circle-o\f10c

fa-dot-circle-o\f192

fa-minus-square\f146

fa-minus-square-o\f147

fa-plus-square\f0fe

fa-plus-square-o\f196

fa-minus\f068

fa-minus-circle\f056

fa-square\f0c8

fa-square-o\f096

fa-plus\f067

fa-plus-circle\f055

fa-times-circle\f057

fa-times-circle-o\f05c

3.
11. Иконки ΠΏΠ»Π°Ρ‚Π΅ΠΆΠ½Ρ‹Ρ… систСм

fa-cc-amex\f1f3

fa-cc-diners-club\f24c

fa-cc-discover\f1f2

fa-cc-jcb\f24b

fa-cc-mastercard\f1f1

fa-cc-paypal\f1f4

fa-cc-stripe\f1f5

fa-cc-visa\f1f0

fa-credit-card\f09d

fa-credit-card-alt\f283

fa-google-wallet\f1ee

fa-paypal\f1ed

3.12. Иконки ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй ΠΈ сообщСств

fa-codepen\f1cb

fa-telegram\f2c6

fa-behance\f1b4

fa-behance-square\f1b5

fa-deviantart\f1bd

fa-whatsapp\f232

fa-digg\f1a6

fa-dribbble\f17d

fa-facebook\f09a

fa-facebook-official\f230

fa-facebook-square\f082

fa-google-plus\f0d5

fa-google-plus-square\f0d4

fa-jsfiddle\f1cc

fa-flickr\f16e

fa-instagram\f16d

fa-github\f09b

fa-github-alt\f113

fa-github-square\f092

fa-linkedin\f0e1

fa-linkedin-square\f08c

fa-odnoklassniki\f263

fa-odnoklassniki-square\f264

fa-pinterest\f0d2

fa-pinterest-p\f231

fa-pinterest-square\f0d3

fa-stack-overflow\f16c

fa-yelp\f1e9

fa-tumblr\f173

fa-tumblr-square\f174

fa-twitter\f099

fa-twitter-square\f081

fa-vk\f189

fa-youtube-square\f166

fa-youtube\f167

3.
13. Иконки рСдактирования тСкста

fa-align-center\f037

fa-align-justify\f039

fa-align-left\f036

fa-align-right\f038

fa-bold\f032

fa-chain\f0c1

fa-chain-broken\f127

fa-clipboard\f0ea

fa-columns\f0db

fa-copy\f0c5

fa-cut\f0c4

fa-dedent\f03b

fa-eraser\f12d

fa-floppy-o\f0c7

fa-font\f031

fa-header\f1dc

fa-indent\f03c

fa-italic\f033

fa-list\f03a

fa-list-alt\f022

fa-list-ol\f0cb

fa-list-ul\f0ca

fa-outdent\f03b

fa-paperclip\f0c6

fa-paragraph\f1dd

fa-paste\f0ea

fa-repeat\f01e

fa-rotate-left\f0e2

fa-rotate-right\f01e

fa-save\f0c7

fa-strikethrough\f0cc

fa-subscript\f12c

fa-superscript\f12b

fa-table\f0ce

fa-text-height\f034

fa-text-width\f035

fa-th\f00a

fa-th-large\f009

fa-th-list\f00b

fa-underline\f0cd

3.
14. Иконки направлСния

fa-level-down\f149

fa-level-up\f148

fa-angle-double-down\f103

fa-angle-double-left\f100

fa-angle-double-right\f101

fa-angle-double-up\f102

fa-angle-down\f107

fa-angle-left\f104

fa-angle-right\f105

fa-angle-up\f106

fa-arrow-circle-down\f0ab

fa-arrow-circle-left\f0a8

fa-arrow-circle-right\f0a9

fa-arrow-circle-up\f0aa

fa-arrow-circle-o-down\f01a

fa-arrow-circle-o-left\f190

fa-arrow-circle-o-right\f18e

fa-arrow-circle-o-up\f01b

fa-arrow-down\f063

fa-arrow-left\f060

fa-arrow-right\f061

fa-arrow-up\f062

fa-arrows-h\f07e

fa-arrows-v\f07d

fa-caret-down\f0d7

fa-caret-left\f0d9

fa-caret-right\f0da

fa-caret-up\f0d8

fa-caret-square-o-down\f150

fa-caret-square-o-left\f191

fa-caret-square-o-right\f152

fa-caret-square-o-up\f151

fa-cart-arrow-down\f218

fa-chevron-circle-down\f13a

fa-chevron-circle-left\f137

fa-chevron-circle-right\f138

fa-chevron-circle-up\f139

fa-chevron-down\f078

fa-chevron-left\f053

fa-chevron-right\f054

fa-chevron-up\f077

fa-exchange\f0ec

fa-long-arrow-down\f175

fa-long-arrow-left\f177

fa-long-arrow-right\f178

fa-long-arrow-up\f176

fa-toggle-down\f150

fa-toggle-left\f191

fa-toggle-right\f152

fa-toggle-up\f151

fa-toggle-off\f204

fa-toggle-on\f205

3.
15. Иконки Π²ΠΈΠ΄Π΅ΠΎ ΠΏΠ»Π΅Π΅Ρ€Π°

fa-arrows-alt\f0b2

fa-backward\f04a

fa-forward\f04e

fa-compress\f066

fa-eject\f052

fa-expand\f065

fa-fast-backward\f049

fa-fast-forward\f050

fa-pause\f04c

fa-pause-circle\f28b

fa-pause-circle-o\f28c

fa-play\f04b

fa-play-circle\f144

fa-play-circle-o\f01d

fa-random\f074

fa-step-backward\f048

fa-step-forward\f051

fa-stop\f04d

fa-stop-circle\f28d

fa-stop-circle-o\f28e

fa-youtube-play\f16a

3.16. Π‘Ρ€Π΅Π½Π΄ΠΎΠ²Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ

fa-bandcamp\f2d5

fa-eercast\f2da

fa-etsy\f2d7

fa-free-code-camp\f2c5

fa-grav\f2d6

fa-imdb\f2d8

fa-linode\f2b8

fa-meetup\f2e0

fa-quora\f2c4

fa-ravelry\f2d9

fa-superpowers\f2dd

fa-wpexplorer\f2de

fa-500px\f26e

fa-adn\f170

fa-amazon\f270

fa-android\f17b

fa-angellist\f209

fa-apple\f179

fa-bitbucket\f171

fa-bitbucket-square\f172

fa-black-tie\f27e

fa-bluetooth\f293

fa-bluetooth-b\f294

fa-buysellads\f20d

fa-chrome\f268

fa-css3\f13c

fa-connectdevelop\f20e

fa-dashcube\f210

fa-delicious\f1a5

fa-dropbox\f16b

fa-drupal\f1a9

fa-edge\f282

fa-empire\f1d1

fa-expeditedssl\f23e

fa-firefox\f269

fa-fonticons\f280

fa-fort-awesome\f286

fa-forumbee\f211

fa-foursquare\f180

fa-ge\f1d1

fa-get-pocket\f265

fa-git\f1d3

fa-git-square\f1d2

fa-gg\f260

fa-gg-circle\f261

fa-google\f1a0

fa-gratipay\f184

fa-hacker-news\f1d4

fa-houzz\f27c

fa-html5\f13b

fa-ioxhost\f208

fa-joomla\f1aa

fa-lastfm\f202

fa-lastfm-square\f203

fa-leanpub\f212

fa-linux\f17c

fa-maxcdn\f136

fa-meanpath\f20c

fa-medium\f23a

fa-mixcloud\f289

fa-modx\f285

fa-opencart\f23d

fa-openid\f19b

fa-opera\f26a

fa-optin-monster\f23c

fa-pagelines\f18c

fa-pied-piper\f1a7

fa-pied-piper-alt\f1a8

fa-product-hunt\f288

fa-qq\f1d6

fa-rebel\f1d0

fa-reddit\f1a1

fa-reddit-square\f1a2

fa-renren\f18b

fa-safari\f267

fa-scribd\f28a

fa-sellsy\f213

fa-share-alt\f1e0

fa-share-alt-square\f1e1

fa-shirtsinbulk\f214

fa-simplybuilt\f215

fa-skyatlas\f216

fa-skype\f17e

fa-slack\f198

fa-slideshare\f1e7

fa-soundcloud\f1be

fa-spotify\f1bc

fa-stack-exchange\f18d

fa-steam\f1b6

fa-steam-square\f1b7

fa-stethoscope\f0f1

fa-stumbleupon\f1a4

fa-stumbleupon-circle\f1a3

fa-tencent-weibo\f1d5

fa-trello\f181

fa-tripadvisor\f262

fa-usb\f287

fa-viacoin\f237

fa-vimeo\f27d

fa-vimeo-square\f194

fa-vine\f1ca

fa-wechat\f1d7

fa-weibo\f18a

fa-wikipedia-w\f266

fa-windows\f17a

fa-wordpress \f19a

fa-xing\f168

fa-xing-square\f169

fa-y-combinator\f23b

fa-yahoo\f19e

3.
17. Иконки Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ

fa-area-chart\f1fe

fa-bar-chart\f080

fa-line-chart\f201

fa-pie-chart\f200

3.18. Π’Ρ€Π°Ρ‰Π°ΡŽΡ‰ΠΈΠ΅ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ

fa-circle-o-notch\f1ce

fa-spinner\f110

fa-gear\f013

fa-spinner\f110

fa-refresh\f021

4. ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ рСсурсы

По ΠΌΠΈΠΌΠΎ сСрвиса Font Awesome ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ рСсурсы, для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»ΡŽ ΠΈΡ… Π½ΠΈΠΆΠ΅.

4.1. IcoMoon

IcoMoon — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· популярных ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ². На Π΄Π°Π½Π½ΠΎΠΌ сСрвисС прСдставлСно Ρ‚Ρ€ΠΈ ΠΏΠ°ΠΊΠ΅Ρ‚Π°, Π±ΠΎΠ»Π΅Π΅ Π΄Π΅Ρ‚Π°Π»ΡŒΠ½ΠΎ с Π½ΠΈΠΌΠΈ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ Ρ‚ΡƒΡ‚. ΠžΡ‚ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠ°ΠΊΠ΅Ρ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π²ΠΈΡΠ΅Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΈ качСство ΠΈΠΊΠΎΠ½ΠΎΠΊ. Π’Π°ΠΊ ΠΆΠ΅ IcoMoon прСдставляСт ΠΎΠ½Π»Π°ΠΉΠ½ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚, ΠΏΠΎΠ²ΠΎΡ€ΠΎΡ‚ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ΅, Π½ΠΎ самый большой плюс ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π² Ρ‚ΠΎΠΌ Ρ‡Ρ‚ΠΎ позволяСт ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свои ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹.

4.2. Material icons

Material icons — сСрвис прСдставляСт плоскиС ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΎΡ‚ Google. Иконки красиво ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π½Π° всСх ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ… ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π½Π° Π»ΡŽΠ±Ρ‹Ρ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ экрана.

ΠšΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡ содСрТит Π² сСбС Π±ΠΎΠ»Π΅Π΅ 750 ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ Π»Π΅Π³ΠΊΠΎ внСдряСтся Π½Π° сайт ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ‚Π΅Π³Π° link, для отобраТСния ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ Material Icons.

Π‘Π°ΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ i с классом material-icons ΠΈΠ»ΠΈ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ html ΠΊΠΎΠ΄Π° ΠΈΠΊΠΎΠ½ΠΊΠΈ.

4.3. Fontello

На сСрвисС Fontello прСдставлСн большой Π²Ρ‹Π±ΠΎΡ€ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ². Π’Π°ΠΊΠΆΠ΅ прСдставлСна Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΎΡ‚Π±ΠΎΡ€Π° ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΈΡ… Π½Π° свой ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€.

4.4. Foundation Icon

Foundation Icon — ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ коллСкция ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΎΡ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° Foundation. Π£Π½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈΡ… Π² Ρ‚ΠΎΠΌ Ρ‡Ρ‚ΠΎ Ρ‚ΡƒΡ‚ прСдставлСны ΠΏΠΎ ΠΌΠΈΠΌΠΎ стандартных ΠΈΠΊΠΎΠ½ΠΎΠΊ Π΅ΡΡ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅, Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π±Ρ€Π΅Π½Π΄ΠΎΠ² ΠΈ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй.

1 прСдыдущая ΡΡ‚Π°Ρ‚ΡŒΡ

❍ ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ IcoMoon — Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ для создания ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ². Π’Ρ‹ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π»ΠΈΠ³Π°Ρ‚ΡƒΡ€Ρ‹ с нСсколькими Ρ‚Π΅Π³Π°ΠΌΠΈ! Π‘ΠΎ всСми Π½ΡƒΠΆΠ½Ρ‹ΠΌΠΈ Ρ„ΠΈΠ³ΡƒΡ€Π°ΠΌΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ мСстС Π²Ρ‹ смоТСтС Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ΄Π½ΠΎΠ³ΠΎ HTTP-запроса.

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… слуТб ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ², созданныС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ прилоТСния IcoMoon, выглядят Ρ‡Π΅Ρ‚ΠΊΠΈΠΌΠΈ, Π° ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ Π²Π°ΠΌΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ Π² Ρ€Π°Π·ΠΌΠ΅Ρ€ Π·Π½Π°Ρ‡ΠΊΠ°.Π£Π·Π½Π°Ρ‚ΡŒ Π±ΠΎΠ»ΡŒΡˆΠ΅β€¦

Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° IcoMoon содСрТит мноТСство высококачСствСнных Π½Π°Π±ΠΎΡ€ΠΎΠ² ΠΈΠΊΠΎΠ½ΠΎΠΊ. ВсС эти Π·Π½Π°Ρ‡ΠΊΠΈ созданы Π² Π²ΠΈΠ΄Π΅ сСтки ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ для использования с ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ IcoMoon. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ любой Π½Π°Π±ΠΎΡ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ ΠΈ ΠΈΡΠΊΠ°Ρ‚ΡŒ Π΅Π³ΠΎ Π·Π½Π°Ρ‡ΠΊΠΈ.

ΠŸΠΎΡ‡Ρ‚ΠΈ всС, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π΄Π΅Π»Π°Π΅Ρ‚Π΅ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ IcoMoon, происходит локально. НапримСр, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅/ΡˆΡ€ΠΈΡ„Ρ‚ SVG ΠΈΠ»ΠΈ создаСтС ΡˆΡ€ΠΈΡ„Ρ‚, всС происходит Π² вашСм Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, ΠΈ ваш SVG Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ Π½Π° наши сСрвСры, Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ Π½Π΅ Ρ€Π΅ΡˆΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ наш хостинг ΠΈΠ»ΠΈ ΠΎΠ±Π»Π°Ρ‡Π½Ρ‹Π΅ слуТбы синхронизации.Π’Ρ‹ всСгда ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ IcoMoon для Chrome, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π΅ Π² сСти, Ссли Π²Ρ‹ всС Π΅Ρ‰Π΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΈΡ‚Π΅ΡΡŒ ΠΎ ΠΊΠΎΠ½Ρ„ΠΈΠ΄Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ SVG & More Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ IcoMoon, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свои Π·Π½Π°Ρ‡ΠΊΠΈ Π² SVG, Polymer, PDF, XAML, CSH, PNG ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹. IcoMoon Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ встроСнныС SVG, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ с Ρ‚Π΅Π³ΠΎΠΌ . Π£Π·Π½Π°Ρ‚ΡŒ Π±ΠΎΠ»ΡŒΡˆΠ΅β€¦

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого прилоТСния Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свои собствСнныС Π²Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ (SVG).Π˜ΠΌΠΏΠΎΡ€Ρ‚ происходит локально, Π²Π½ΡƒΡ‚Ρ€ΠΈ вашСго Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π’Π°ΠΊΠΆΠ΅ доступны Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ основныС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ рСдактирования, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅, Π·Π΅Ρ€ΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅.

ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ IcoMoon ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ бСсплатно. Π€Π°ΠΉΠ»Ρ‹ ΠΊΠΎΠ΄Π° (HTML, CSS, JS), созданныС IcoMoon, ΠΈΠΌΠ΅ΡŽΡ‚ Π»ΠΈΡ†Π΅Π½Π·ΠΈΡŽ MIT. ЛицСнзия для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠ°ΠΊΠ΅Ρ‚Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΡƒΠΊΠ°Π·Π°Π½Π° Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ прилоТСния.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ IcoMoon для Chrome Π² Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅! Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎΠ± этом ΠΊΠ°ΠΊ ΠΎΠ± ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠΉ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ бСсплатных Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ доступ, Π΄Π°ΠΆΠ΅ ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π½Π΅ Π² сСти!

НастройтС ΡˆΡ€ΠΈΡ„Ρ‚ для своих ΠΈΠΊΠΎΠ½ΠΎΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ IcoMoon | by Rui Soares

Как Π²Ρ‹ вставляСтС Π·Π½Π°Ρ‡ΠΊΠΈ Π½Π° свой Π²Π΅Π±-сайт? Π’Ρ‹ Ρ…Ρ€Π°Π½ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ»Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΊΠ°ΠΊ Π°ΠΊΡ‚ΠΈΠ²Ρ‹? Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π»ΠΈ Π²Ρ‹ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ Font Awesome ΠΈΠ»ΠΈ Ionicons?

ΠŸΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠΌ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π΅ вашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ выполняСт Π²Ρ‹Π·ΠΎΠ² ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Π΅ΠΌΡƒ Π½ΡƒΠΆΠ΅Π½ Π·Π½Π°Ρ‡ΠΎΠΊ, ΠΈ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ нСпросто Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ. Π’ зависимости ΠΎΡ‚ Ρ‚ΠΈΠΏΠ° Ρ„Π°ΠΉΠ»Π°, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Π·Π½Π°Ρ‡ΠΎΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π°, Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ» Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для этого.

Π’Ρ‚ΠΎΡ€ΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ оставляСт вас с Ρ€Π°Π·Π΄ΡƒΡ‚Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ, Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹ΠΌ Π½Π΅Π½ΡƒΠΆΠ½Ρ‹ΠΌΠΈ Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ. Font Awesome β€” ΠΎΠ΄Π½Π° ΠΈΠ· самых извСстных Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΈΠΊΠΎΠ½ΠΎΠΊ, содСрТащая Π±ΠΎΠ»Π΅Π΅ 700 ΠΈΠΊΠΎΠ½ΠΎΠΊ; ΠΈΠ· Π½ΠΈΡ…, сколько Π²Ρ‹ Π½Π° самом Π΄Π΅Π»Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅? А Ρ‡Ρ‚ΠΎ, Ссли ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅ ваша ΠΊΠΎΠΌΠ°Π½Π΄Π° Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² Π²Ρ‹Π±Π΅Ρ€Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ Facebook? Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π»ΠΈΠ±ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ Π² качСствС Π°ΠΊΡ‚ΠΈΠ²Π°, Π»ΠΈΠ±ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Π·Π½Π°Ρ‡ΠΊΠΎΠ².

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ использованиС Π·Π½Π°Ρ‡ΠΊΠΎΠ², я Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ инструмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡΡŒ сам, β€” ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ IcoMoon.

IcoMoon β€” это инструмСнт Π² Π²ΠΈΠ΄Π΅ Π²Π΅Π±-прилоТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ собствСнныС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ для Π·Π½Π°Ρ‡ΠΊΠΎΠ². Π’ Π½Π΅ΠΌ Π΅ΡΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈΠ· Ρ€Π°Π·Π½Ρ‹Ρ… источников, ΠΈ Π²Ρ‹ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свои собствСнныС svgs. Π£ IcoMoon Ρ‚Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ собствСнный Π½Π°Π±ΠΎΡ€ ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΈΠ· Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ 1600 ΠΈΠΊΠΎΠ½ΠΎΠΊ Π½Π° Π²Ρ‹Π±ΠΎΡ€.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ: «Как, Ρ‡Π΅Ρ€Ρ‚ возьми, ΠΌΠ½Π΅ это ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ?Β». Π§Ρ‚ΠΎ ΠΆ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ с Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π·Π°ΠΉΠ΄Π΅ΠΌ Π½Π° icomoon.io ΠΈ Π½Π°ΠΆΠΌΠ΅ΠΌ ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ IcoMoon Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ.

Π”Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Ρ‡Π½Π΅ΠΌ с добавлСния Π·Π½Π°Ρ‡ΠΊΠ° Facebook Π² наш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚. ΠΠ°ΠΏΠΈΡˆΠΈΡ‚Π΅ Β«facebookΒ» Π² строкС поиска.

ПослС Π²Ρ‹Π±ΠΎΡ€Π° этих Π΄Π²ΡƒΡ… Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π² Font Awesome (ΠΏΠΎΠ·ΠΆΠ΅ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΠΈΠ· Π΄Π²ΡƒΡ…) просто Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ «плюс» справа ΠΎΡ‚ ΠΏΠ°Π½Π΅Π»ΠΈ поиска.

Π—Π°ΠΊΡ€Ρ‹Π² поиск (крСстик справа ΠΎΡ‚ строки поиска) ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΡƒΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹Π΅ Π½Π°ΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ. Π”Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ стрСлку Π½Π°Π·Π°Π΄ ΠΈ Π²ΠΏΠ΅Ρ€Π΅Π΄, просто Π²Π²Π΅Π΄ΠΈΡ‚Π΅ «стрСлка» Π² поискС ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΈΡ… ΠΈΠ· Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ².

Π― Π²Ρ‹Π±Ρ€Π°Π» эти Π΄Π²Π° ΠΈΠ· Π½Π°Π±ΠΎΡ€Π° IcoMoon — Free.Как я ΡƒΠΆΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ», с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ прилоТСния IcoMoon Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ, Π½ΠΎ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ свои собствСнныС Π·Π½Π°Ρ‡ΠΊΠΈ Π² Π²ΠΈΠ΄Π΅ SVG ΠΊ Π²Ρ‹Π±ΠΎΡ€Ρƒ. Для этого Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Import Icons Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части страницы ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ». Для этого ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° я Π΄ΠΎΠ±Π°Π²ΠΈΠ» Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΡƒΡŽ ΠΈΠΊΠΎΠ½ΠΊΡƒ Ρ‚Π²ΠΈΡ‚Ρ‚Π΅Ρ€Π°.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ наш ΡˆΡ€ΠΈΡ„Ρ‚, ΠΌΡ‹ просто Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈ Π½Π°ΠΆΠΈΠΌΠ°Π΅ΠΌ ΠΊΠ½ΠΎΠΏΠΊΡƒ Generate Font Π²Π½ΠΈΠ·Ρƒ страницы.

На этой страницС Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ названия ΠΈ ΠΊΠΎΠ΄Ρ‹ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Ρ… Π·Π½Π°Ρ‡ΠΊΠΎΠ².

ИзмСнив ΠΈΠΌΠ΅Π½Π° ΠΈ ΠΊΠΎΠ΄Ρ‹ Π½Π° своС усмотрСниС, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΡˆΠ΅ΡΡ‚Π΅Ρ€Π΅Π½ΠΊΡƒ рядом с ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ. Π’ этом Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌ ΠΎΠΊΠ½Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π°Ρ‚ΡŒ имя своСму ΡˆΡ€ΠΈΡ„Ρ‚Ρƒ, Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ прСфикс класса ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ sass, stylus ΠΈΠ»ΠΈ less Π² своСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ Generate Sass, Less ΠΈΠ»ΠΈ Stylus ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ‚Ρƒ, которая Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π°.

ПослС Π²Ρ‹Π±ΠΎΡ€Π° ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹Ρ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² ΠΈ, Π½Π°ΠΊΠΎΠ½Π΅Ρ†, Π½Π°ΠΆΠ°Ρ‚ΡŒ Β«Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒΒ». Π’Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ zip-Ρ„Π°ΠΉΠ», Π²Π½ΡƒΡ‚Ρ€ΠΈ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Ρ„Π°ΠΉΠ»Ρ‹:

  • demo-Ρ„Π°ΠΉΠ»Ρ‹ ΠΈ demo.html β€” это просто ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π²Π°ΠΌΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ²
  • ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ содСрТит Ρ„Π°ΠΉΠ»Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΏΠ°ΠΏΠΊΡƒ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°
  • selection.json содСрТит ваш Π²Ρ‹Π±ΠΎΡ€ Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ IcoMoon
  • style. css содСрТит ΡΡ‚ΠΈΠ»ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² ваш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚

Π€Π°ΠΉΠ» стиля содСрТит font-face для ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°, ΡΡ‚ΠΈΠ»ΡŒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для нашСго класса Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈ содСрТимоС для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π·Π½Π°Ρ‡ΠΊΠ°.Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚Π΅ этот ΠΊΠΎΠ΄ Π² свой ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, Π²Π°ΠΌ просто Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ элСмСнт (ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ это ) ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ .icon-facebook ΠΊ Π΅Π³ΠΎ классам, ΠΈ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ свою ΠΈΠΊΠΎΠ½ΠΊΡƒ Facebook.

IcoMoon ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΏΠ»Π°Ρ‚Π½ΡƒΡŽ услугу, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΡƒΡŽ, ΠΏΠΎΠΌΠΈΠΌΠΎ ΠΏΡ€ΠΎΡ‡Π΅Π³ΠΎ, ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ ваш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π² ΠΎΠ±Π»Π°ΠΊΠ΅. Π‘ бСсплатным ΠΏΠ»Π°Π½ΠΎΠΌ ваш Π²Ρ‹Π±ΠΎΡ€ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² кСшС вашСго Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Если Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ Π·Π° эту ΠΏΡ€Π΅ΠΌΠΈΠ°Π»ΡŒΠ½ΡƒΡŽ услугу, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» selection.json Π² своСм Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΈ ΠΈ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ IcoMoon всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ Π² свой ΡˆΡ€ΠΈΡ„Ρ‚ Π·Π½Π°Ρ‡ΠΊΠΎΠ².

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» selection.json , ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° страницу Manage Projects , Π²Ρ‹Π±Ρ€Π°Π² ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ с Ρ‚Π΅ΠΌ ΠΆΠ΅ ΠΈΠΌΠ΅Π½Π΅ΠΌ Π² мСню Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π° Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ. На Π½ΠΎΠ²ΠΎΠΉ страницС Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Import Project ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» selection.json .

IcoMoon: Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ со ΡˆΡ€ΠΈΡ„Ρ‚Π°ΠΌΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ²

КаТдоС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ нуТдаСтся Π² Π·Π½Π°Ρ‡ΠΊΠ°Ρ… ΠΈ простой Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠ΅, ΠΈ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ срСдством для ΠΈΡ… встраивания являСтся ΡˆΡ€ΠΈΡ„Ρ‚.Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ, Π²Ρ‹Π±Ρ€Π°Π²ΡˆΠΈΠ΅ этот ΠΏΡƒΡ‚ΡŒ, вСроятно, ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΠ»ΠΈΡΡŒ со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ разочарованиями:

  • Π’ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΉ Π²Π°ΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ΅ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π½Π΅Ρ‚ Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ Π·Π½Π°Ρ‡ΠΊΠ°
  • Π£ вас Π΅ΡΡ‚ΡŒ SVG, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Π½ΠΎ Π±ΠΎΠ³ Π·Π½Π°Π΅Ρ‚, ΠΊΠ°ΠΊ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π² ΡˆΡ€ΠΈΡ„Ρ‚
  • НСт возмоТности тСкстового поиска ΠΏΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Ρƒ

Как ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ люди, я ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ FontAwesome. Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ Π½ΡƒΠΆΠ½ΡƒΡŽ ΠΌΠ½Π΅ ΠΈΠΊΠΎΠ½ΠΊΡƒ, Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΈΡΠΊΠ°Ρ‚ΡŒ Π² Π³ΡƒΠ³Π»Π΅ «fa ΡˆΠΏΠ°Ρ€Π³Π°Π»ΠΊΠ°» ΠΈ ΠΌΡƒΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ список, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π΅Π½Π½Ρ‹ΠΉ Π² качСствС ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π°.ΠŸΡ€ΠΈ создании iOS-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ я просто ΠΊΠΎΠΏΠΈΡ€ΡƒΡŽ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ прямо ΠΈΠ· ΡˆΠΏΠ°Ρ€Π³Π°Π»ΠΊΠΈ ΠΈ Π²ΡΡ‚Π°Π²Π»ΡΡŽ Π΅Π³ΠΎ Π»ΠΈΠ±ΠΎ Π² свой исходный ΠΊΠΎΠ΄, Π»ΠΈΠ±ΠΎ Π² конструктор интСрфСйса. Π‘ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π²Π°ΠΌ часто приходится Π²Ρ‹ΡΡΠ½ΡΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ юникода. Иногда Π΄Π°ΠΆΠ΅ это слоТно.

НСсколько Π΄Π½Π΅ΠΉ Π½Π°Π·Π°Π΄ я ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ» инструмСнт ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ IcoMoon, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ фактичСски сущСствуСт с 2011 Π³ΠΎΠ΄Π° ΠΈ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ ΠΏΠΎΡ‡Ρ‚ΠΈ всС ΠΌΠΎΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, связанныС с ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ.

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Angular, IcoMoon Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ являСтся Π°Π³Ρ€Π΅Π³Π°Ρ‚ΠΎΡ€ΠΎΠΌ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ создатСлСм ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ².ПослС запуска прилоТСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ прСдлагаСтся ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ, ΠΈΡΠΊΠ°Ρ‚ΡŒ ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΈΠ· тысяч Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Π·Π½Π°Ρ‡ΠΊΠΎΠ² с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠΉ Π»ΠΈΡ†Π΅Π½Π·ΠΈΠ΅ΠΉ ΠΈ ΠΏΡ€Π΅ΠΌΠΈΡƒΠΌ-класса.

ΠŸΠΎΡ‡Ρ‚ΠΈ всС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ, Π΅ΡΡ‚ΡŒ ΠΈ ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹; Octicons, Iconic, FontAwesome, Material Icons ΠΈ мноТСство Π½Π°Π±ΠΎΡ€ΠΎΠ² ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… я Ρ€Π°Π½ΡŒΡˆΠ΅ Π½Π΅ ΡΠ»Ρ‹ΡˆΠ°Π». Однако я Π·Π°ΠΌΠ΅Ρ‚ΠΈΠ», Ρ‡Ρ‚ΠΎ EvilIcons отсутствуСт, ΠΈ это ΠΌΠ½Π΅ нравится. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π² Π½Π°Π±ΠΎΡ€Π΅ IcoMoon Free Π΅ΡΡ‚ΡŒ Ρ‚ΠΎΠ½Π½Ρ‹ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΠΌΠΏΠ΅Π½ΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ это, ΠΈ ΠΏΡ€Π΅ΠΌΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ выглядят ΠΎΡ‡Π΅Π½ΡŒ Π·Π°ΠΌΠ°Π½Ρ‡ΠΈΠ²ΠΎ.

Когда Π²Ρ‹ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ Π½ΡƒΠΆΠ½Ρ‹Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»ΠΈΠ±ΠΎ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΈΡ… Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, Π»ΠΈΠ±ΠΎ ΡΠ³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ всС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ CSS, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Unicode ΠΈ символ для копирования ΠΈ вставки.

Π― Π±ΡƒΠΊΠ²Π°Π»ΡŒΠ½ΠΎ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ этим инструмСнтом. Π‘ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, для Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π½Π΅Π΄ΠΎΡ€ΠΎΠ³ΠΈΠ΅ ΠΏΡ€Π΅ΠΌΠΈΡƒΠΌ-вСрсии ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΒ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ хостинг ΠΈ распространСниС ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎ Ρ‚Π΅ΠΌ ΠΆΠ΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ°ΠΌ, Ρ‡Ρ‚ΠΎ ΠΈ Adobe TypeKit: управляйтС Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½Ρ‹ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ, Ρ‡Π΅Ρ€Π΅Π· icomoon.io, ΠΈ ΠΎΠ½ΠΈ позаботятся ΠΎΠ± ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΈ ΡƒΠ΄Π°Π»Π΅Π½Π½Ρ‹Ρ… Ρ„Π°ΠΉΠ»ΠΎΠ² CSS ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² для вас Π² своСй сСти распространСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

БСзусловно, моя любимая функция этого инструмСнта β€” большая ΠΊΠ½ΠΎΠΏΠΊΠ° Import Icons , которая позволяСт ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ любой ΡˆΡ€ΠΈΡ„Ρ‚ SVG ΠΈΠ»ΠΈ SVG для добавлСния Π² Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ.

Π”ΡƒΠΌΠ°ΡŽ, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ это оцСнят.

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ созданию Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΈΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ любая Ρ€Π°Π±ΠΎΡ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ выполняСтС Π±Π΅Π· ΠΏΡ€Π΅ΠΌΠΈΡƒΠΌ-Π°ΠΊΠΊΠ°ΡƒΠ½Ρ‚Π°, сохраняСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² кСшС вашСго Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.Π’Π°ΠΌ придСтся Π·Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΠ½Π»Π°ΠΉΠ½-Π°ΠΊΠΊΠ°ΡƒΠ½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ.

БущСствуСт Π΄Π²Π° Ρ‚ΠΈΠΏΠ° ΠΏΡ€Π΅ΠΌΠΈΡƒΠΌ-Π°ΠΊΠΊΠ°ΡƒΠ½Ρ‚ΠΎΠ²: Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΏΠ»Π°Π½ Π·Π° 9 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² Π² мСсяц ΠΈΠ»ΠΈ 69 Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² Π² Π³ΠΎΠ΄ ΠΈΠ»ΠΈ Π±Π΅Π·Π»ΠΈΠΌΠΈΡ‚Π½Ρ‹ΠΉ ΠΏΠ»Π°Π½ Π·Π° ΡƒΠ΄Π²ΠΎΠ΅Π½Π½ΡƒΡŽ сумму. Как Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ, Ρ‚Π°ΠΊ ΠΈ Π±Π΅Π·Π»ΠΈΠΌΠΈΡ‚Π½Ρ‹ΠΉ ΠΏΠ»Π°Π½ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π²Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ ΠΈ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ Π² CSS, Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±Π΅Π·Π»ΠΈΠΌΠΈΡ‚Π½Ρ‹ΠΉ ΠΏΠ»Π°Π½ обСспСчиваСт Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ рСсурсов с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ S3 ΠΈΠ»ΠΈ Cloudflare.

IcoMoon Π±Ρ‹Π» создан ΠΈ поддСрТиваСтся Keyamoon, Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠΌ.Π₯ΠΎΡ€ΠΎΡˆΠΎ сдСлано!

Настройка Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Icon

Acquia Cohesion позволяСт Π²Π°ΠΌ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°ΠΌΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Icon для использования Π½Π° вашСм Π²Π΅Π±-сайтС. Он Ρ‚Π°ΠΊΠΆΠ΅ прСдоставляСт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π·Π½Π°Ρ‡ΠΊΠΎΠ² (ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½ΠΈΠΆΠ΅), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ поиск ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π² стили вашСго Π²Π΅Π±-сайта.

Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π½Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ изобраТСниями. Они Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ ΠΊ содСрТимому, ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ. Они ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ‚ΠΈΠΏΠΎΠΌ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² качСствС содСрТимого Π² стилях псСвдоэлСмСнтов :before ΠΈ : after. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ Π² качСствС содСрТимого страницы, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ элСмСнт изобраТСния ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ .png.

Π”ΠΎΠ»ΠΆΠ΅Π½ Π»ΠΈ я Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свои ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Icon?

ΠŸΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π² настройки вашСго Π²Π΅Π±-сайта Ρƒ вас Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Β«Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒΒ» ΠΈΠ»ΠΈ Β«Π˜ΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΒ» ваши ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ². Если Π²Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Ρ‹ Π½Π° вашСм Π²Π΅Π±-сСрвСрС вмСстС со страницами ΠΈ Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ вашСго Π²Π΅Π±-сайта. Если Π²Ρ‹ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ свои ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Icon, ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Ρ‹ Π½Π° Icomoon ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΌ хостС.

Π’Ρ‹Π±ΠΎΡ€ ΠΌΠ΅ΠΆΠ΄Ρƒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΎΠΉ (ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅) ΠΈΠ»ΠΈ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΎΠΌ (Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΌ мСстС) зависит ΠΎΡ‚ уровня Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ° вашСго Π²Π΅Π±-сайта, гСографичСского мСстополоТСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ вашСго Π²Π΅Π±-сайта ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ², Π²Π»ΠΈΡΡŽΡ‰ΠΈΡ… Π½Π° ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ (ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ) обслуТивания ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Icon.Icomoon прСдоставляСт Π΄Π²Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° CDN для обслуТивания ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΎΠ±Π° ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… обСспСчат Π²Ρ‹ΡΠΎΠΊΠΎΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ обслуТиваниС Π·Π½Π°Ρ‡ΠΊΠΎΠ².

Π€Π°ΠΉΠ»Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈ трСбования ΠΊ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρƒ Ρ„Π°ΠΉΠ»ΠΎΠ²

ΠŸΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π²Π°ΠΌ ΠΏΠΎΡ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ Π΄Π²Π° элСмСнта:

  1. ZIP-Ρ„Π°ΠΉΠ», содСрТащий ваш Π·Π½Π°Ρ‡ΠΎΠΊ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… EOT, SVG, TTF, WOFF, WOFF2Β 
  2. Π€Π°ΠΉΠ» JSON, содСрТащий ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π² ΡˆΡ€ΠΈΡ„Ρ‚Π΅ Π·Π½Π°Ρ‡ΠΊΠΎΠ². Π­Ρ‚ΠΎ трСбуСтся для отобраТСния Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π² срСдствС Π²Ρ‹Π±ΠΎΡ€Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ².

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Π΅ Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ JSON

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ способ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ для Π·Π½Π°Ρ‡ΠΊΠΎΠ², Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ„Π°ΠΉΠ» JSON, β€” ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· этих популярных Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠ² ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² для Π·Π½Π°Ρ‡ΠΊΠΎΠ²:

Acquia Cohesion ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ JSON, прСдоставляСмый Icomoon ΠΈ Fontello.Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚, сгСнСрированный Ρ‡Π΅ΠΌ-Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠΌ, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ» JSON Π² этом Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅.

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ размСщСния ΡˆΡ€ΠΈΡ„Ρ‚Π° Π·Π½Π°Ρ‡ΠΊΠ°

Π£ вас Π΅ΡΡ‚ΡŒ Π΄Π²Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° использования ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ².

  1. Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π½Π° Π²Π΅Π±-сайт β€” Π¨Ρ€ΠΈΡ„Ρ‚ Π·Π½Π°Ρ‡ΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±ΡΠ»ΡƒΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ нСпосрСдствСнно вашим Π²Π΅Π±-сайтом
  2. Π˜ΠΌΠΏΠΎΡ€Ρ‚ с URL-адрСса Β β€” ΡˆΡ€ΠΈΡ„Ρ‚ значков подаСтся с Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ хоста, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ AWS, ΠΈΠ»ΠΈ поставщика хоста ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ², Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Icomoon
  3. .

Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ Icomoon

Icomoon β€” популярный Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΈ ΠΏΡ€ΠΎΠ²Π°ΠΉΠ΄Π΅Ρ€ хостинга ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ².Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎΠ± Icomoon здСсь.

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ Icon Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ Icomoon:

  1. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ Acquia Cohesion > Настройки Π²Π΅Π±-сайта > Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ
  2. Π’ Icon Fonts Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Upload Icomoon icon font Β 
  3. Π”ΠΎΠ±Π°Π²Π»Π΅Π½Π° ​​новая строка ΠΏΠΎΠ»Π΅ΠΉ, ΠΈ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Icomoon отобраТаСтся Π² ΠΏΠΎΠ»Π΅. Π­Ρ‚ΠΎ сСмСйство ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²
  4. .
  5. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒΒ  Upload.zip ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ своСму Ρ„Π°ΠΉΠ»Ρƒ .zip, содСрТащий ваш Π·Π½Π°Ρ‡ΠΎΠΊ ΡˆΡ€ΠΈΡ„Ρ‚Π°. Бюда Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ Π·Π½Π°Ρ‡ΠΊΠ° Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… EOT, SVG, TTF, WOFF, WOFF2. УспСшно Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½Ρ‹ Π·Π΅Π»Π΅Π½ΠΎΠΉ Π³Π°Π»ΠΎΡ‡ΠΊΠΎΠΉ
  6. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ имя Π² ΠΏΠΎΠ»Π΅ ΠœΠ΅Ρ‚ΠΊΠ° Β 
  7. НаТмитС Β Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Β  JSONΒ  ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» JSON. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ это с Icomoon. Он прСдоставляСт индСкс Π²Π°ΡˆΠΈΡ… Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈ трСбуСтся для Π²Ρ‹Π±ΠΎΡ€Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ². Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с Icomoon
  8. .
  9. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ.

Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ Fontello

Fontello β€” популярный Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ². Он Π½Π΅ прСдоставляСт хостинг ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Icon. Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎ Π€ΠΎΠ½Ρ‚Π΅Π»Π»ΠΎ здСсь.

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ Icon Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ Fontello:

  1. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ Acquia Cohesion > Настройки Π²Π΅Π±-сайта > Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ²
  2. Π’ графичСских ΡˆΡ€ΠΈΡ„Ρ‚Π°Ρ… Π½Π°ΠΆΠΌΠΈΡ‚Π΅ синюю ΠΊΠ½ΠΎΠΏΠΊΡƒ со стрСлкой ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ Π·Π½Π°Ρ‡ΠΊΠ° Fontello
  3. Π”ΠΎΠ±Π°Π²Π»Π΅Π½Π° ​​новая строка ΠΏΠΎΠ»Π΅ΠΉ, ΠΈ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ fontello отобраТаСтся Π² ΠΏΠΎΠ»Π΅.Π­Ρ‚ΠΎ сСмСйство ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²
  4. .
  5. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒΒ  Upload.zip ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ .zip, содСрТащСму ваш Π·Π½Π°Ρ‡ΠΎΠΊ ΡˆΡ€ΠΈΡ„Ρ‚Π°. Бюда Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ Π·Π½Π°Ρ‡ΠΊΠ° Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… EOT, SVG, TTF, WOFF, WOFF2. УспСшно Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½Ρ‹ Π·Π΅Π»Π΅Π½ΠΎΠΉ Π³Π°Π»ΠΎΡ‡ΠΊΠΎΠΉ
  6. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ имя Π² ΠΏΠΎΠ»Π΅ ΠœΠ΅Ρ‚ΠΊΠ° Β 
  7. НаТмитС Β Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Β  JSONΒ  ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» JSON. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΅Π³ΠΎ с Π²Π΅Π±-сайта Fontello. Он прСдоставляСт индСкс Π²Π°ΡˆΠΈΡ… Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈ трСбуСтся для Π²Ρ‹Π±ΠΎΡ€Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ².НайдитС Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Π½Π°Ρ‡Π°Π»Π΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Fontello
  8. .
  9. НаТмитС Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ

Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅

Если Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Icomoon ΠΈΠ»ΠΈ Fontello , Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ свой собствСнный ΡˆΡ€ΠΈΡ„Ρ‚ для Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» JSON для срСдства Π²Ρ‹Π±ΠΎΡ€Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ².

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ Icon Π² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅:

  1. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ Acquia Cohesion > Настройки Π²Π΅Π±-сайта > Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ²
  2. Π’ графичСских ΡˆΡ€ΠΈΡ„Ρ‚Π°Ρ… Π½Π°ΠΆΠΌΠΈΡ‚Π΅ синюю ΠΊΠ½ΠΎΠΏΠΊΡƒ со стрСлкой ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΡˆΡ€ΠΈΡ„Ρ‚
  3. Π”ΠΎΠ±Π°Π²Π»Π΅Π½Π° ​​новая строка ΠΏΠΎΠ»Π΅ΠΉΒ 
  4. НаТмитС  Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ. zip ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ .zip, содСрТащСму ваш Π·Π½Π°Ρ‡ΠΎΠΊ ΡˆΡ€ΠΈΡ„Ρ‚Π°. Бюда Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ Π·Π½Π°Ρ‡ΠΊΠ° Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… EOT, SVG, TTF, WOFF, WOFF2. УспСшно Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½Ρ‹ Π·Π΅Π»Π΅Π½ΠΎΠΉ Π³Π°Π»ΠΎΡ‡ΠΊΠΎΠΉ
  5. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ имя Π² ΠΏΠΎΠ»Π΅ ΠœΠ΅Ρ‚ΠΊΠ° Β 
  6. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ сСмСйство ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π² ΠΏΠΎΠ»Π΅ БСмСйство ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² . Оно Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ с Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ сСмСйства ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ»ΠΈ
  7. .
  8. НаТмитС Β Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Β  JSONΒ  ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» JSON.Π­Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π² этом Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅
  9. НаТмитС Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ

Π˜ΠΌΠΏΠΎΡ€Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π²Π΅Π±-Π·Π½Π°Ρ‡ΠΊΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Icomoon

Icomoon прСдоставляСт услугу ΠΏΡ€Π΅ΠΌΠΈΡƒΠΌ-класса, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ΠΌ вашСго ΡˆΡ€ΠΈΡ„Ρ‚Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π½Π° Amazon S3 ΠΈΠ»ΠΈ CloudFront. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ эту слуТбу, всС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ URL-адрСс Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Π½ΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ прСдоставлСнный Ρ„Π°ΠΉΠ» JSON. Π£Π·Π½Π°ΠΉΡ‚Π΅ большС ΠΎΠ± Icomoon здСсь.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈΠ· Icomoon:

  1. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ Acquia Cohesion > Настройки Π²Π΅Π±-сайта > Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ²
  2. Π’ Icon Fonts Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Import Icomoon icon font
  3. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ имя Π² ΠΏΠΎΠ»Π΅ Π―Ρ€Π»Ρ‹ΠΊ .ΠœΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Β«IcomoonΒ» Π² ярлык, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ Π·Π½Π°Π»ΠΈ, Ρ‡Ρ‚ΠΎ это ΡˆΡ€ΠΈΡ„Ρ‚ Icomoon Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ
  4. .
  5. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ URL-адрСс Β  мСста, Π³Π΄Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ Π·Π½Π°Ρ‡ΠΎΠΊ ΡˆΡ€ΠΈΡ„Ρ‚Π°, Π² ΠΏΠΎΠ»Π΅Β  @import Β . Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Icomoon для размСщСния вашСго ΡˆΡ€ΠΈΡ„Ρ‚Π°, это прСдоставляСтся ΠΈΠΌΠΈ
  6. .
  7. НаТмитС Β Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Β  JSONΒ  ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» JSON. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ это с Icomoon. Он прСдоставляСт индСкс Π²Π°ΡˆΠΈΡ… Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈ трСбуСтся для срСдства Π²Ρ‹Π±ΠΎΡ€Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ²
  8. .
  9. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ.

Π˜ΠΌΠΏΠΎΡ€Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π²Π΅Π±-Π·Π½Π°Ρ‡ΠΊΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Fontello

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈΠ· Fontello:

  1. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ Acquia Cohesion > Настройки Π²Π΅Π±-сайта > Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ²
  2. Π’ графичСских ΡˆΡ€ΠΈΡ„Ρ‚Π°Ρ… Π½Π°ΠΆΠΌΠΈΡ‚Π΅ синюю ΠΊΠ½ΠΎΠΏΠΊΡƒ со стрСлкой ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π˜ΠΌΠΏΠΎΡ€Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π·Π½Π°Ρ‡ΠΊΠ° Fontello
  3. ΠŸΠΎΡΠ²ΠΈΡ‚ΡΡ Π½ΠΎΠ²Ρ‹ΠΉ ряд ΠΏΠΎΠ»Π΅ΠΉ
  4. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ имя Π² ΠΏΠΎΠ»Π΅ Π―Ρ€Π»Ρ‹ΠΊ . ΠœΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Β«FontelloΒ» Π² ярлык, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ Π·Π½Π°Π»ΠΈ, Ρ‡Ρ‚ΠΎ это ΡˆΡ€ΠΈΡ„Ρ‚ Fontello Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ
  5. .
  6. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ Β  URL-адрСс Ρ‚ΠΎΠ³ΠΎ мСста, Π³Π΄Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ Π·Π½Π°Ρ‡ΠΎΠΊ ΡˆΡ€ΠΈΡ„Ρ‚Π°, Π² ΠΏΠΎΠ»Π΅Β  @import Β 
  7. НаТмитС Β Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Β  JSONΒ  ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» JSON. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ это с Π€ΠΎΠ½Ρ‚Π΅Π»Π»ΠΎ. Он прСдоставляСт индСкс Π²Π°ΡˆΠΈΡ… Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈ трСбуСтся для срСдства Π²Ρ‹Π±ΠΎΡ€Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ²
  8. .
  9. НаТмитС Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ

Π˜ΠΌΠΏΠΎΡ€Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π²Π΅Π±-Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅

Если Π²Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Icomoon ΠΈΠ»ΠΈ Fontello , Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свой собствСнный ΡˆΡ€ΠΈΡ„Ρ‚ для Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» JSON для срСдства Π²Ρ‹Π±ΠΎΡ€Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ².

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ Icon Π² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅:

  1. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ Acquia Cohesion > Настройки Π²Π΅Π±-сайта > Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ²
  2. Π’ Icon Fonts Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° синюю ΠΊΠ½ΠΎΠΏΠΊΡƒ со стрСлкой ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Import Custom icon font
  3. ΠŸΠΎΡΠ²ΠΈΡ‚ΡΡ Π½ΠΎΠ²Ρ‹ΠΉ ряд ΠΏΠΎΠ»Π΅ΠΉ
  4. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ имя Π² ΠΏΠΎΠ»Π΅ Π―Ρ€Π»Ρ‹ΠΊ Β 
  5. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ Β  URL-адрСс Ρ‚ΠΎΠ³ΠΎ мСста, Π³Π΄Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ Π·Π½Π°Ρ‡ΠΎΠΊ ΡˆΡ€ΠΈΡ„Ρ‚Π°, Π² ΠΏΠΎΠ»Π΅Β  @import Β 
  6. НаТмитС Β Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Β  JSONΒ  ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» JSON. Π­Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅
  7. .
  8. НаТмитС Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ

ИспользованиС IcoMoon для прСобразования Π·Π½Π°Ρ‡ΠΊΠΎΠ² SVG Π² ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ²

Π¨Ρ€ΠΈΡ„Ρ‚Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ² β€” это популярная вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… ΠΏΡƒΡ‚Π΅ΠΌ примСнСния стилСй CSS. Они ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΡ‹, ΠΈΠΌΠ΅ΡŽΡ‚ нСбольшой Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ Π² Π½ΠΈΡ… Π½Π΅Ρ‚ Π½ΠΈ Ρ†ΠΈΡ„Ρ€, Π½ΠΈ Π±ΡƒΠΊΠ². ВмСсто этого ΠΎΠ½ΠΈ содСрТат Π³Π»ΠΈΡ„Ρ‹ ΠΈ символы.

IcoMoon позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ собствСнныС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ для Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… ΠΏΠΎ Π²Π°ΡˆΠ΅ΠΌΡƒ Π²Ρ‹Π±ΠΎΡ€Ρƒ.Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌ Π·Π½Π°Ρ‡ΠΊΠΈ SVG ΠΈ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΡƒΠ΅ΠΌ ΠΈΡ… Π² ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ².

  1. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° https://icomoon.io/app/#/select .
  2. ПослС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β« Π˜ΠΌΠΏΠΎΡ€Ρ‚ Π·Π½Π°Ρ‡ΠΊΠΎΠ²Β» Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ:

3. Π˜ΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠ΅ΠΌ 4 Ρ„Π°ΠΉΠ»Π°: UpArrow-01.svg , RightArrow-01.svg , DownArrow-01. svg ΠΈ BreadCrubmsArroe-01.svg . Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΈΡ… ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β« ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Β»:

Β 4.НСдавно Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ SVG появятся Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Β« Untitled Set Β».

Β 5. Β Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ, Π½Π°ΠΆΠ°Π² Π½Π° Π½ΠΈΡ…. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΌΠ΅Ρ‡Π΅Π½Ρ‹ ΠΎΡ€Π°Π½ΠΆΠ΅Π²ΠΎΠΉ Ρ€Π°ΠΌΠΊΠΎΠΉ. НаТмитС Β« Generate Font Β»:

Β 6.  На Π½ΠΎΠ²ΠΎΠΉ страницС Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ свСдСния ΠΎ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Ρ… Π²Π°ΠΌΠΈ Π·Π½Π°Ρ‡ΠΊΠ°Ρ…. ВсС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΠΈΡ…. НаТмитС Β« Download Β» Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΠ³Π»Ρƒ:

7. Π‘ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ Ρ„Π°ΠΉΠ» icomoon.zip.

8. Π Π°Π·Π°Ρ€Ρ…ΠΈΠ²ΠΈΡ€ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Ρ„Π°ΠΉΠ»Ρ‹:

  • icomoon/fonts: ΠšΠ°Ρ‚Π°Π»ΠΎΠ³, содСрТащий всС сгСнСрированныС Ρ„Π°ΠΉΠ»Ρ‹.
  • icomoon/demo-files: ΠšΠ°Ρ‚Π°Π»ΠΎΠ³ Π₯Ρ€Π°Π½ΠΈΡ‚ Ρ„Π°ΠΉΠ»Ρ‹, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ для Β« demo.html Β».
  • icomoon/demo.html: HTML-Ρ„Π°ΠΉΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ использован Π½Π° Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ·Π΄Π½Π΅ΠΌ этапС. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊ Π½Π΅ΠΌΡƒ, ΠΊΠΎΠ³Π΄Π° это Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ. demo.html ΠΈ Π΄Π΅ΠΌΠΎ-Ρ„Π°ΠΉΠ»Ρ‹ Π½Π° Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½Ρ‹.
  • icomoon/Read Me.txt: Набор инструкций.
  • icomoon/selection.json: Π€Π°ΠΉΠ» json, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ хранятся свСдСния ΠΎ вашСй ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ. Π­Ρ‚ΠΎΡ‚ Ρ„Π°ΠΉΠ» ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для обновлСния вашСго ΡˆΡ€ΠΈΡ„Ρ‚Π° Π½Π° IcoMoon Π² любоС врСмя.
  • icomoon/style.css: Π­Ρ‚ΠΎ Ρ„Π°ΠΉΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ потрСбуСтся Π²Π°ΡˆΠ΅ΠΌΡƒ CSS для Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ вновь созданных ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ².

Β 9. Β Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΈ сохранитС ΠΏΠ°ΠΏΠΊΡƒ fonts Π² ΠΏΠ°ΠΏΠΊΡƒ вашСй Ρ‚Π΅ΠΌΡ‹.

Β 10. Β Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΈ сохранитС Ρ„Π°ΠΉΠ» style.css Π² Ρ„Π°ΠΉΠ» css вашСй Ρ‚Π΅ΠΌΡ‹.

Β 11.Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π² нашСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅. Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ font-family ΠΈ css content для отобраТСния Π·Π½Π°Ρ‡ΠΊΠ° SVG DownArrow-01, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ Π½Π°ΠΌΠΈ:

Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Icomoon | DX8 ΠžΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°

Icomoon β€” это Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ с DX8. Π’ этом руководствС содСрТится информация ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Icomoon ΠΊ добавлСнию Π² DX8. ΠΠ°ΠΉΠ΄ΠΈΡ‚Π΅Β Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ настройкС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ².

Для получСния Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎΠ± Icomoon ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ΡΡŒ ΠΊ ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Icomoon.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ Icomoon, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Icomoon Π² качСствС сСмСйства ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ². Π’ нашСй Π΄ΠΎΡ€ΠΎΠΆΠ½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚Π΅ прСдусмотрСно использованиС Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² для Π·Π½Π°Ρ‡ΠΊΠΎΠ² Icomoon.

ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Icomoon icon для DX8

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²:

Π¨Π°Π³ 1. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ ΡƒΡ‡Π΅Ρ‚Π½ΡƒΡŽ запись Icomoon

Π’Π°ΠΌ потрСбуСтся учСтная запись Icomoon, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ².ΠŸΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅ страницу рСгистрации, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡƒΡ‡Π΅Ρ‚Π½ΡƒΡŽ запись, ΠΈΠ»ΠΈ Π²ΠΎΠΉΠ΄ΠΈΡ‚Π΅ Π² ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ ΡƒΡ‡Π΅Ρ‚Π½ΡƒΡŽ запись.

Π¨Π°Π³ 2. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚

  1. ЗапуститС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Icomoon, Π½Π°ΠΆΠ°Π² ΠΊΠ½ΠΎΠΏΠΊΡƒΒ  ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Icomoon Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницС
  2. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ экрану Β«ΠŸΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹Β», Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² мСню ΠΈ Π²Ρ‹Π±Ρ€Π°Π² Β«Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌΠΈΒ» . ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΏΠΎ URL-адрСсу ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ, войдя Π² систСму.

Β 

Π¨Π°Π³ 3. Настройка Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ²

  1. На экранС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ справа ΠΎΡ‚ вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°
  2. НаТмитС Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈΠ· Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π½ΡƒΠΆΠ½ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ
  3. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈΠ· Π½Π°Π±ΠΎΡ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π² Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²
  4. НаТмитС Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ Π²Π½ΠΈΠ·Ρƒ страницы.

Π•ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·Π½Ρ‹Ρ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ², ΠΊΠ°ΠΊ ΠΏΠ»Π°Ρ‚Π½Ρ‹Ρ…, Ρ‚Π°ΠΊ ΠΈ бСсплатных. Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π±Ρ‹Π» Π²Ρ‹Π±Ρ€Π°Π½ Π½Π°Π±ΠΎΡ€ Icomoon — Free .

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Π·Π½Π°Ρ‡ΠΊΠΈΒ Π² свою Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ. Π­Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ .svg. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π˜ΠΌΠΏΠΎΡ€Ρ‚ Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΈΡ… Π½Π° локальном дискС.

Β 

Π¨Π°Π³ 4. Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚ Π·Π½Π°Ρ‡ΠΊΠ° ΠΈ Ρ„Π°ΠΉΠ»Ρ‹ JSON

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» JSON ΠΈ Ρ„Π°ΠΉΠ»Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ²:

  1. ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΊ экрану ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²
  2. НаТмитС Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ справа ΠΎΡ‚ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°
  3. НаТмитС Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΠ³Π»Ρƒ экрана
  4. НаТмитС Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π² ΠΏΡ€Π°Π²ΠΎΠΌ Π½ΠΈΠΆΠ½Π΅ΠΌ ΡƒΠ³Π»Ρƒ экрана
  5. Π­Ρ‚ΠΎ прСдоставит Π²Π°ΠΌ Ρ„Π°ΠΉΠ» . ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ»

. Π¨Π°Π³Β 5. Π Π°Π·Π°Ρ€Ρ…ΠΈΠ²ΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΈ ΠΈΠ·Π²Π»Π΅ΠΊΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» ΡˆΡ€ΠΈΡ„Ρ‚Π° Π·Π½Π°Ρ‡ΠΊΠ° ΠΈ Ρ„Π°ΠΉΠ»Ρ‹ JSON

.

ПослС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Ρ„Π°ΠΉΠ»Π° .zip с Icomoon

  1. Π Π°Π·Π°Ρ€Ρ…ΠΈΠ²ΠΈΡ€ΡƒΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π²Π»Π΅Ρ‡ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΈ JSON (ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½ΠΈΠΆΠ΅)
  2. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ ZIP-Ρ„Π°ΠΉΠ» Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ· ΠΏΠ°ΠΏΠΊΠΈ Fonts. Π­Ρ‚ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ Π½Π° DX8
  3. Π€Π°ΠΉΠ» selection.json β€” это JSON, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ Π² DX8.

Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ собствСнныС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ для Π·Π½Π°Ρ‡ΠΊΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Icomoon

Π’ соврСмСнной сСти всС хотят, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡ… сайт Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Π» быстро ΠΈ быстро.Π­Ρ‚ΠΎΡ‚ Π±Π»ΠΎΠ³ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ ΠΊ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ Π²Π΅Π±-прСдставлСниям, Π½ΠΎ Π² Π½Π΅ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ рассказано ΠΎΠ± ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΌ Ρ„Π°ΠΊΡ‚ΠΎΡ€Π΅ Π²Π΅Π±-ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² использовании ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ² CSS вмСсто ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Π’ настоящСС врСмя использованиС ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΎΡ‡Π΅Π½ΡŒ популярно ΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ. ЦСлью создания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ² являСтся ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° ΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅, пСрСчислСнныС Π½ΠΈΠΆΠ΅: —

β€’ Π—Π½Π°Ρ‡ΠΊΠΈ выглядят Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅Ρ‚ΠΊΠΈΠΌΠΈ ΠΈ Ρ‡Π΅Ρ‚ΠΊΠΈΠΌΠΈ
β€’ ВсС Π·Π½Π°Ρ‡ΠΊΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ Π² ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ», Ρ‡Ρ‚ΠΎ сниТаСт количСство запросов ΠΊ сСрвСру
β€’ Π›Π΅Π³ΠΊΠΎ настраиваСтся для Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ
β€’ Он Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ мСньшС ΠΈ Π»Π΅Π³Ρ‡Π΅ ΠΏΠΎ вСсу
β€’ ΠŸΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΡ€Ρ‚Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΈ Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½Ρ‹ΠΉ
β€’ НСт ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ для Π·Π½Π°Ρ‡ΠΊΠΎΠ²

Π’ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ мноТСство Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² для создания собствСнной Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² для Π·Π½Π°Ρ‡ΠΊΠΎΠ², Π½ΠΎ я ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ», Ρ‡Ρ‚ΠΎ это ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Icomoon.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€ΠΈΡˆΠ»ΠΎ врСмя ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ наши ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ для Π·Π½Π°Ρ‡ΠΊΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ прилоТСния Icomoon.

Π—Π°ΠΉΠ΄ΠΈΡ‚Π΅ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Icomoon, ΠΈ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ ΡƒΠ³Π»Ρƒ экрана. НаТмитС Β«Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌΒ» > «Новый ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Β» (Π²Π²Π΅Π΄ΠΈΡ‚Π΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°) > Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅

.

ПослС наТатия Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ нСсколько Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Icomoon прСдоставляСт Π½Π°ΠΌ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π·Π½Π°Ρ‡ΠΊΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π² своСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свою ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π˜ΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈΒ» (ΠΎΠ½Π° находится Π½Π° Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ) ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ Β«svgΒ».
Π’Ρ‹ смоТСтС ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π½Π° экранС. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ всС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ², Π·Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠ°Ρ‚ΡŒ Β«Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹Β» (ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ находится Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части ΠΎΠΊΠ½Π°).

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ² с ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ ΠΈΡ… классов ΠΈ ΠΊΠΎΠ΄ΠΎΠΌ содСрТимого CSS. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΡ…, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ имя ΠΏΠΎ своСму ТСланию.

Автор записи

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *