Π¨Ρ€ΠΈΡ„Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ: Font Awesome — ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈ CSS-инструмСнтарий

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

25+ бСсплатных иконичСских ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² (Icon Fonts) для Π΄ΠΈΠ·Π°ΠΉΠ½Π° вашСго WordPress сайта

Π—Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΈ элСгантно ΠΏΡ€ΠΈΡƒΠΊΡ€Π°ΡΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ вашСго WordPress сайта? Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ!

Π“Π»Π°Π²Π½ΠΎΠ΅ достоинство ΠΈ прСимущСство Icon Fonts Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ эти Π·Π½Π°Ρ‡ΠΊΠΈ выглядят ΠΊΠ°ΠΊ графичСскиС элСмСнты, Π½ΠΎ ΠΏΠΎ сути ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ. А это Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ эти иконки ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π½Π° экранах с Π»ΡŽΠ±Ρ‹ΠΌ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ, вСдь ΠΎΠ½ΠΈ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅.

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅:

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

А самоС Π³Π»Π°Π²Π½ΠΎΠ΅Β β€” Π² сСти ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ бСсплатных ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½Π΅ понадобится Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π½ΠΈ ΠΊΠΎΠΏΠ΅ΠΉΠΊΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡΠ²Π΅ΠΆΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ своСго сайта.

Π’ этом постС ΠΌΡ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π»ΠΈ 27 бСсплатных Π½Π°Π±ΠΎΡ€ΠΎΠ²Β ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ. ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ ΠΏΠΎ ссылкС ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ²ΡˆΠ΅Π³ΠΎΡΡ Π½Π°Π±ΠΎΡ€Π°, Π·Π°Π³Ρ€ΡƒΠΆΠ°ΠΉΡ‚Π΅ ΠΈ добавляйтС Π½Π° свой сайт WordPress.

1. Font Awesome

Β 

Β 

3. Themify Icons

Β 

4. Foundation Icon Fonts 3

Β 

5. Elegant Icon Font

Β 

6. Dripicons

Β 

7. Pictonic

Β 

8. Sosa

Β 

9. Typicons

Β 

10. Metrize Icons

Β 

11. Ionicons

Β 

12. Symbol Signs

Β 

13. IcoMoon

Β 

14. Batch

Β 

15. Socialico

Β 

16. RaphaΓ«l Icon-Set

Β 

17. Entypo

Β 

18. MFG Labs Icon Set

Β 

19. Ligature Symbols

Β 

20. PW Drawn Icon Font

Β 

21. Fontelico

Β 

22. Feather Icon Set

Β 

23. Premium Pixels

Β 

24. Rondo Social Icon Font

Β 

25. Map Icons

Β 

26. Weather Icons

Β 

27. Space Icons

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅:

Π˜Π·ΡƒΡ‡Π°Π΅Ρ‚ сайтостроСниС с 2008 Π³ΠΎΠ΄Π°. ΠŸΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒΡŽΡ‰ΠΈΠΉ вСбмастСр, ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ Π½Π° созданиС сайтов Π½Π° WordPress. Π—Π°Π΄Π°Ρ‚ΡŒ вопрос АлСксСю ΠΌΠΎΠΆΠ½ΠΎ Π½Π° https://profiles.wordpress.org/wpthemeus/

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½Π°Π±ΠΎΡ€ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π°

Π‘Ρ‚Π°Ρ‚ΡŒΡ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ рассмотрим процСсс создания ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сСрвиса IcoMoon (https://icomoon.io/).

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π° для сайта являСтся ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· основных Π·Π°Π΄Π°Ρ‡ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°. Π’.ΠΊ. использованиС Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… Π½Π°Π±ΠΎΡ€ΠΎΠ² ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², ΠΌΠΎΠΆΠ΅Ρ‚ сильно «ΡƒΡ‚ΡΠΆΠ΅Π»ΠΈΡ‚ΡŒ» Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ страниц сайта. Π­Ρ‚ΠΎ связано с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ содСрТат большоС количСство ΠΈΠΊΠΎΠ½ΠΎΠΊ (Font Awesome — 675 ΠΈΠΊΠΎΠ½ΠΎΠΊ, IconMoon — 491, Foundation Icons — 283, Glyphicons Halflings – Π±ΠΎΠ»Π΅Π΅ 250). Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ количСство ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Ρ€Π΅Π°Π»ΡŒΠ½ΠΎ трСбуСтся для оформлСния срСднСго сайта, находится Π² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ ΠΎΡ‚ 20 Π΄ΠΎ 50 Π΅Π΄ΠΈΠ½ΠΈΡ†.

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° ΠΈ нСдостатки ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²

Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ прСдставляСт собой ΠΎΠ±Ρ‹ΠΊΠ½ΠΎΠ²Π΅Π½Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ вмСсто Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹Ρ… символов ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π·Π½Π°Ρ‡ΠΊΠΈ (ΠΈΠΊΠΎΠ½ΠΊΠΈ).

ИспользованиС ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² Ρ‚Π°ΠΊΠΎΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ являСтся ΠΎΡ‡Π΅Π½ΡŒ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΎΡ‡Π΅Π½ΡŒ просто ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ, Ρ‚.Π΅. ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ†Π²Π΅Ρ‚ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹. ΠžΡΡƒΡ‰Π΅ΡΡ‚Π²Π»ΡΠ΅Ρ‚ΡΡ это с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°ΠΊΠΈΡ… ΠΆΠ΅ свойств CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ для стилизации ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ тСкста (font-size, color ΠΈ Π΄Ρ€.). Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈΠΊΠΎΠ½ΠΊΠΈ находятся Π² Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ выглядят Π½Π° экранах устройств с высокой ΠΏΠ»ΠΎΡ‚Π½ΠΎΡΡ‚ΡŒΡŽ пиксСлСй. ΠšΡ€ΠΎΠΌΠ΅ этого ΡˆΡ€ΠΈΡ„Ρ‚ — это сТатый Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, Π° Π·Π½Π°Ρ‡ΠΈΡ‚, для Π΅Π³ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π³ΠΎΡ€Π°Π·Π΄ΠΎ мСньшС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Ρ‡Π΅ΠΌ для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹Ρ… Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π•Ρ‰Ρ‘ ΠΎΠ΄Π½ΠΈΠΌ нСоспоримым плюсом ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ всСми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ. ΠžΡΡƒΡ‰Π΅ΡΡ‚Π²Π»ΡΠ΅Ρ‚ΡΡ это благодаря созданию Π½Π° Π±Π°Π·Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΠ°ΠΊΠ΅Ρ‚Π° ΠΈΠΊΠΎΠ½ΠΎΠΊ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ…: eot, ttf, svg ΠΈ woff. Π­Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ использовал Ρ‚ΠΎΡ‚ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ½ «ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚». ΠŸΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π½Π° Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π½Π΅Ρ‚ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹ поддСрТивался всСми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ.

ΠšΡ€ΠΎΠΌΠ΅ достоинств Ρƒ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ Π΅ΡΡ‚ΡŒ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΈ нСдостатки. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ связан с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ‚Π΅Ρ€ΡΡŽΡ‚ Ρ‡Π΅Ρ‚ΠΊΠΎΡΡ‚ΡŒ отрисовки ΠΏΡ€ΠΈ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… ΠΈΠ·-Π·Π° сглаТивания. Π’Ρ‚ΠΎΡ€ΠΎΠΉ нСдостаток Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½ΠΈΡ… нСльзя Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ Ρ†Π²Π΅Ρ‚Π½ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ. Если Ρƒ вас ΠΊ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌ ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ Ρ‚Π°ΠΊΠΈΠ΅ трСбования, Ρ‚ΠΎ Π² качСствС ΠΈΡ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ svg.

ΠžΡΠ½ΠΎΠ²Π½Ρ‹ΠΉ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ дСйствий ΠΏΠΎ созданию ΡˆΡ€ΠΈΡ„Ρ‚Π° Π² IcoMoon App

Рассмотрим Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ основныС шаги ΠΏΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π² сСрвисС IcoMoon App:

  1. ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π½Π° страницу IcoMoon App, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ½ΠΎΠΏΠΊΠΈ, располоТСнной Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницС сСрвиса ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ URL адрСс: https://icomoon.io/app/.
  2. ВвСсти Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° (Π·Π½Π°Ρ‡ΠΎΠΊ «Manage Projects»).
  3. Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΏΡ€ΠΈ нСобходимости ΡˆΡ€ΠΈΡ„Ρ‚ Font Awesome (ΠΊΠ½ΠΎΠΏΠΊΠ° с трСмя полосочками -> Icon Library).
  4. Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ пустой Π½Π°Π±ΠΎΡ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для помСщСния Π² Π½Π΅Π³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… (своих) ΠΈΠΊΠΎΠ½ΠΎΠΊ (ΠΊΠ½ΠΎΠΏΠΊΠ° с 3 линиями -> New Empty Set).
  5. Π—Π°Π΄Π°Ρ‚ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ созданному Π½Π°Π±ΠΎΡ€Ρƒ (ΠΊΠ½ΠΎΠΏΠΊΠ° с трСмя полосочками -> View / Edit Info).
  6. Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² Π½Π°Π±ΠΎΡ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ (свои) Π·Π½Π°Ρ‡ΠΊΠΈ (ΠΊΠ½ΠΎΠΏΠΊΠ° «3 Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ» -> Import to Set).
  7. Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ Π½Π°Π±ΠΎΡ€, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ инструмСнта «Select».
  8. Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΡŽ ΡˆΡ€ΠΈΡ„Ρ‚Π° (Π½Π°ΠΆΠ°Ρ‚ΡŒ Π²Π½ΠΈΠ·Ρƒ страницы Π½Π° элСмСнт «Generate Font»).
  9. ΠΠ°ΠΆΠ°Ρ‚ΡŒ Π½Π° Π·Π½Π°Ρ‡ΠΎΠΊ ΡˆΠ΅ΡΡ‚Π΅Ρ€Ρ‘Π½ΠΊΠΈ ΠΈ Π² ΠΎΡ‚ΠΊΡ€Ρ‹Π²ΡˆΠ΅ΠΌΡΡ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ ввСсти Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° (Font Name), прСфикс класса (Class Prefix), Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠΏΡ†ΠΈΡŽ «Use a class» (Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ класс) ΠΈ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π² ΠΏΠΎΠ»Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ «.icon».
  10. ΠΠ°ΠΆΠ°Ρ‚ΡŒ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ «Download».

Π Π°Π±ΠΎΡ‚Π° Π² сСрвисС IcoMoon — Π’Ρ‹Π±ΠΎΡ€ ΠΈΠΊΠΎΠ½ΠΎΠΊ (шаг 1)Π Π°Π±ΠΎΡ‚Π° Π² сСрвисС IcoMoon — Π£ΠΊΠ°Π·Π°Π½ΠΈΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠΉ Π·Π½Π°Ρ‡ΠΊΠ°ΠΌ (шаг 2)Π Π°Π±ΠΎΡ‚Π° Π² сСрвисС IcoMoon — Установки для Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Π°

ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΊ страницС

Для установки ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ€Π°ΡΠΏΠ°ΠΊΠΎΠ²Π°Ρ‚ΡŒ Π°Ρ€Ρ…ΠΈΠ², созданный сайтом IcoMoon, ΠΈ пСрСнСсти ΠΈΠ· Π½Π΅Π³ΠΎ Π² Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ fonts (ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹) ΠΈ Ρ„Π°ΠΉΠ» «style.css».

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΠ°ΠΏΠΊΠ° со ΡˆΡ€ΠΈΡ„Ρ‚Π°ΠΌΠΈ Π΄ΠΎΠ»ΠΆΠ½Π° Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅ Ρ‡Ρ‚ΠΎ ΠΈ Ρ„Π°ΠΉΠ» CSS. Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ fonts Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ внСсти ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ измСнСния Π² Ρ„Π°ΠΉΠ» «style.css».

ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΊ страницС ΠΈ классов для ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π½ΠΈΠΌ осущСствляСтся посрСдством Ρ„Π°ΠΉΠ»Π° «style.css».


<!-- path-to - ΠΏΡƒΡ‚ΡŒ Π΄ΠΎ Ρ„Π°ΠΉΠ»Π° style.css -->
<link href="path-to/style.css" rel="stylesheet">

ΠŸΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ содСрТимоС Ρ„Π°ΠΉΠ»Π° «style.css» ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π² свой Ρ„Π°ΠΉΠ» стилСй. Π­Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ количСство HTTP-запросов ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ страницы.

ИспользованиС ΠΈΠΊΠΎΠ½ΠΎΠΊ Π½Π° страницС

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ созданного ΡˆΡ€ΠΈΡ„Ρ‚Π° Π½Π° страницС осущСствляСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнта i, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ класс icon (опрСдСляСтся Π½Π° основС настройки «Use a class») ΠΈ класс ΠΈΠΊΠΎΠ½ΠΊΠΈ.


<!-- icon - Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ класс -->
<!-- icon-ok - класс иконки ok -->
<i></i>

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй для сайта

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ собствСнных ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… Π·Π½Π°Ρ‡ΠΊΠΎΠ² для сайта ΠΎΡ‡Π΅Π½ΡŒ просто Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π² ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠΌ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΌ SVG Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ Inkscape.

Для этого ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΡƒΠΆΠ΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ изобраТСниями ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈΠ· бСсплатных Π½Π°Π±ΠΎΡ€ΠΎΠ².

Если Π²Ρ‹ Π² качСствС исходников Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ растровыС изобраТСния Π·Π½Π°Ρ‡ΠΊΠΎΠ², Ρ‚ΠΎ ΠΈΡ… ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ слСдуСт Π²Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ.

ПослС ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠΈ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… svg-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ сСрвиса IcoMoon ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ Π² ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ «Twitter» Π² Inkscape

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй Π² Ρ„ΠΎΡ€ΠΌΠ΅ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° со скруглёнными краями.

Π‘Π±ΠΎΡ€ΠΊΠ° ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈΠ· созданных ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² IcoMoon

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ с ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ ΠΈ исходныС ΠΊΠΎΠ΄Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ ссылкС: https://yadi.sk/d/oaOfUROSyTjDQ.

ИспользованиС ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ Π½Π° страницС (классы ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π² Ρ„Π°ΠΉΠ»Π΅ «style.css»):


<i></i>

ΠšΡ€ΠΎΠΌΠ΅ IcoMoon Π΅ΡΡ‚ΡŒ Π΅Ρ‰Ρ‘ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½ сСрвисы для создания Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π² Π²ΠΈΠ΄Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Π°. К Π½ΠΈΠΌ относится «fontello.com», «fontastic.me», «glyphter.com», «pictonic.co» ΠΈ Π΄Ρ€.

Π¨Ρ€ΠΈΡ„Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ — достойная Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π° растру

Π§Π΅ΠΌ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ jpg/png

ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΡŒ Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΠΈ качСства. Никто Π½Π΅ ΠΈΡ‰Π΅Ρ‚ Π±ΡƒΠΊΠ²Ρ‹ побольшС для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ Π±ΡƒΠΊΠ²Ρ‹ помСньшС для тСкста. Π’Ρ‹ просто ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΡˆΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈ Π² css ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΡˆΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±ΡƒΠΊΠ². Π’ΠΎΠΆΠ΅ самоС с ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ. Π˜ΠΊΠΎΠ½ΠΊΡƒ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ любого Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈ ΠΎΠ½Π° всСгда Π±ΡƒΠ΄Π΅Ρ‚ Ρ‡Ρ‘Ρ‚ΠΊΠΎΠΉ.

Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ это ΠΏΡ€Π΅ΠΆΠ΄Π΅ всСго ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈ ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΊ Ρ‚Π°ΠΊΠΈΠΌ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ всС css свойства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ тСксту. Для измСнСния Ρ†Π²Π΅Ρ‚Π° ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π΅ Π½ΡƒΠΆΠ΅Π½ графичСский Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€. ΠŸΡ€ΠΎΡΡ‚ΠΎ помСняй Ρ†Π²Π΅Ρ‚ Π² css. ΠšΡΡ‚Π°Ρ‚ΠΈ псСвдо классы Ρ‚ΠΈΠΏΠ° :hover Ρ‚ΠΎΠΆΠ΅ ΡΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Π΄Π°Ρ‘Ρ‚ Π΅Ρ‰Ρ‘ больший простор для творчСства.

Как ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ fontawesome

Π“Π΄Π΅ Π±Ρ€Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹? Поиск выдаст ΠΊΡƒΡ‡Ρƒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠ² Ρ€Π°Π·Π½ΠΎΠΉ стСпСни платности ΠΈ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Рассмотрим Π΄Π²Π° fontello.com ΠΈ fontawesome.ru

Начнём с бСсплатного ΡˆΡ€ΠΈΡ„Ρ‚Π° с Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ описаниСм Π½Π° русском β€” fontawesome.ru. ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ Π΄Π΅Π»ΠΎΠΌ ΠΊΠ°Ρ‡Π°Π΅ΡˆΡŒ ΠΈ Ρ€Π°ΡΠΏΠ°ΠΊΠΎΠ²Ρ‹Π²Π°Π΅ΡˆΡŒ Π°Ρ€Ρ…ΠΈΠ². ΠšΠΎΠΏΠΈΡ€ΡƒΠ΅ΡˆΡŒ ΠΏΠ°ΠΏΠΊΡƒ font-awesome Π² ΠΏΠ°ΠΏΠΊΡƒ с сайтом. Π”Π°Π»ΡŒΡˆΠ΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒβ€¦ Π”ΡƒΠΌΠ°Π΅ΡˆΡŒ ΡˆΡ€ΠΈΡ„Ρ‚? НСт. ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅Ρˆ css Ρ„Π°ΠΉΠ» font-awesome.min.css Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π² <head>

<link rel="stylesheet" href="ΠΏΡƒΡ‚ΡŒ/Π΄ΠΎ/font-awesome/css/font-awesome.min.css">

Иконки fontawesome Π²ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. Π’Π°ΠΌ Π³Π΄Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠ° Π²ΡΡ‚Π°Π²Π»ΡΠ΅ΡˆΡŒ строчный элСмСнт, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ <i> ΠΈΠ»ΠΈ <span> ΠΈ добавляСшь ΠΊ Π½Π΅ΠΌΡƒ класс fa ΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ ΠΈΠΊΠΎΠ½ΠΊΠ΅ класс.Β  ΠŸΡ€ΠΎΡ‰Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. На сайтС fontawesome.ru ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡˆΡŒ Π² мСню Иконки ΠΈ кликаСшь ΠΏΠΎ Π½ΡƒΠΆΠ½ΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΊΠ΅. ПопадаСшь Π½Π° страницу Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Ρ‚Π°ΠΌ, Π³Π΄Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΊΠΎΠ½ΠΊΠ°. Π’Π°ΠΊ выглядит ΠΊΠΎΠ΄ для Π’Π΅Π»Π΅Π³Ρ€Π°ΠΌ.

<i aria-hidden="true"></i>

ΠŸΡ€ΠΎΡΡ‚ΠΎ Π²Ρ‹Π²ΠΎΠ΄ΠΎΠΌ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π΄Π΅Π»ΠΎ Π½Π΅ ограничиваСтся. Добавляя классы ΠΌΠΎΠΆΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€, ΠΏΠΎΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ. ΠŸΠΎΠ»Π½Ρ‹ΠΉ список возмоТностСй с ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΌ описаниСм ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌΠΈ смотри Π½Π° fontawesome.ru/examples/ .

Π•Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ сайт Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π° халяву Ρ…Π°ΠΏΠ½ΡƒΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ β€” fontello.com. Он отличаСтся ΠΎΡ‚ fontawesome.ru Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой Π½Π°Π±ΠΎΡ€ ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π° Π½Π΅ Ρ‚ΡΠ½ΡƒΡ‚ΡŒ всС, большая Ρ‡Π°ΡΡ‚ΡŒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½Π΅ ΠΏΡ€ΠΈΠ³ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой Π½Π°Π±ΠΎΡ€Β  Π·Π°Ρ…ΠΎΠ΄ΠΈΡˆΡŒ Π½Π°Β  fontello.com. На Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Select Icons кликаСш ΠΏΠΎ Π½ΡƒΠΆΠ½Ρ‹ΠΌ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌ. Рядом с красной ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ Download пишСшь Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ ΡΠΊΠ°Ρ‡ΠΈΠ²Π°Π΅ΡˆΡŒ свой ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚.

Иконки с fontello Π²ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ Ρ‚Π°ΠΊΠΆΠ΅ Ρ‡Π΅Ρ€Π΅Π· Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ класса ΠΊ строковому элСмСнту. НазваниС классов смотри Π² Ρ„Π°ΠΉΠ»Π΅ demo.html(Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π² скачанном Π°Ρ€Ρ…ΠΈΠ²Π΅ с ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ). Π”Π΅Ρ„ΠΎΠ»Ρ‚Π½Ρ‹Π΅ названия классов ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Customize Names.

Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΈΠ»ΠΈ SVG — Ρ‡Ρ‚ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π² 2018? – Π‘Π°Π·Π° Π·Π½Π°Π½ΠΈΠΉ Timeweb Community

ГрафичСскиС ΠΈΠΊΠΎΠ½ΠΊΠΈ — ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ элСмСнт практичСски любого сайта ΠΈΠ»ΠΈ прилоТСния. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, вСсят ΠΎΠ½ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ, ΠΎΠ΄Π½Π°ΠΊΠΎ вопрос Π²Ρ‹Π±ΠΎΡ€Π° Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° всС Ρ€Π°Π²Π½ΠΎ остаСтся Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ. Если Π½Π΅ Π±Ρ€Π°Ρ‚ΡŒ Π² расчСт стандартныС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π΅ΡΡ‚ΡŒ Π΄Π²Π° основных Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°: ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ SVG Π»ΠΈΠ±ΠΎ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ (icon fonts). Π§Ρ‚ΠΎΒ Π»ΡƒΡ‡ΡˆΠ΅? РазбСрСмся Π½ΠΈΠΆΠ΅.


Π­Π²ΠΎΠ»ΡŽΡ†ΠΈΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ


ΠŸΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ появился язык стилСй CSS, всС ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° сайтах прСдставляли собой изобраТСния. Но Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρ„Π°ΠΉΠ»Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠ½ΠΎΠ³ΠΎ вСсят, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΡΡ‚Ρ€Π΅ΠΌΠΈΠ»ΠΈΡΡŒ Π½Π°ΠΉΡ‚ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ нСсколько Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ…Β ΡΠΏΠΎΡΠΎΠ±ΠΎΠ²Β ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… ΠΈΠΊΠΎΠ½ΠΎΠΊ. НапримСр, CSS-спрайты ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ всС ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ, Π½ΠΎ ΠΈΠ·-Π·Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ с Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒΡŽ этот способ Π½Π΅ стал популярным способом отобраТСния ΠΈΠΊΠΎΠ½ΠΎΠΊ — ΠΈΒ Π² 2012 Π½Π° смСну ΠΈΠΌ ΠΏΡ€ΠΈΡˆΠ»ΠΈ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹. А сСйчас ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΎΡ‚Π΄Π°ΡŽΡ‚ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠΉ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠ΅ — SVG (Scalable Vector Graphics).


Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹


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


Но, ΠΊΠ°ΠΊ ΠΈ Ρƒ CSS-спрайтов, ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΈΠΌΠ΅ΡŽΡ‚ свои нСдостатки — Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΈΡ… ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ приходится Π΄Π΅Π»Π°Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ запросы Π½Π° сСрвСр, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ FOIT (Flash of Invisible Text) — ситуации, ΠΊΠΎΠ³Π΄Π° ΡˆΡ€ΠΈΡ„Ρ‚ Π½Π΅ отобраТаСтся Π²ΠΎΠΎΠ±Ρ‰Π΅. По этой ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π΄Π΅Π»Π°ΡŽΡ‚ Π²Ρ‹Π±ΠΎΡ€ Π² ΠΏΠΎΠ»ΡŒΠ·Ρƒ SVG.


Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ SVG


SVG (Scalable Vector Graphics) позволяСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ. Π€ΠΎΡ€ΠΌΠ°Ρ‚ SVG быстро стал Π½ΠΎΠ²Ρ‹ΠΌ стандартом для ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. Они быстрСС Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ, прСкрасно ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΈ Π±ΠΎΠ»Π΅Π΅ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹Π΅ Π² использовании, Ρ‡Π΅ΠΌ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹. ВСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ стоит ΠΈΠ· ΠΊΠΎΠ΄Π° ΠΈ вСсит Π³ΠΎΡ€Π°Π·Π΄ΠΎ мСньшС, Ρ‡Π΅ΠΌ изобраТСния Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π°Ρ… JPG ΠΈΠ»ΠΈ PNG ΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ².


Π‘Ρ€Π°Π²Π½Π΅Π½ΠΈΠ΅


Настало врСмя ΡΡ€Π°Π²Π½ΠΈΡ‚ΡŒ SVG ΠΈ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΏΠΎ нСскольким ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌ.


1. Π Π°Π·ΠΌΠ΅Ρ€


Если ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ встроСнный SVG, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ SVG Π² CSS, Ρ‚ΠΎ ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚Π°Ρ‚ΡŒ тяТСлым ΠΈ Π³Ρ€ΠΎΠΌΠΎΠ·Π΄ΠΊΠΈΠΌ. К Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ встроСнный SVG ΠΊΠΎΠ΄ Π½Π΅ ΠΊΡΡˆΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π²Π½Π΅ΡˆΠ½ΠΈΡ… SVG Ρ„Π°ΠΉΠ»ΠΎΠ². ΠŸΠΎΡΡ‚ΠΎΠΌΡƒΒ Π΅ΡΠ»ΠΈ Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ страницС сайта много Ρ€Π°Π·Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ, Ρ‚ΠΎ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Π΅Π΅ встроСнных SVG ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ (Π½ΠΎ ΠΏΡ€ΠΈ условии, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π³ΠΎΡ‚ΠΎΠ²ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²).


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


2. ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ


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


ВстроСнныС SVG ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ запроса, Π½ΠΎ ΠΈ ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ ΠΎΠ½ΠΈ Ρ‚ΠΎΠΆΠ΅ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚.


МоТно ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ SVG Ρ„Π°ΠΉΠ»Ρ‹ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ внСшний Ρ„Π°ΠΉΠ» — ΠΈ Ρ‚ΠΎΠ³Π΄Π° Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.


ΠžΠΏΡΡ‚ΡŒ ΠΆΠ΅, ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ зависит ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, сколько вСсят ваши ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹/SVG.


3. Π“ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ


Оба Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ с использованиСм CSS, Π½ΠΎ SVG Π΄Π°Π΅Ρ‚ Π³ΠΎΡ€Π°Π·Π΄ΠΎ большС возмоТностСй, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ Ρ€Π°Π·Π½ΠΎΡ†Π²Π΅Ρ‚Π½Ρ‹ΠΌΠΈ.


Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚Π°ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ CSS-стили (Ρ‚Π΅Π½ΡŒ, Ρ†Π²Π΅Ρ‚ ΠΈ Ρ‚.Π΄.), ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ массово ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»Π° Π² CSS, ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.


4. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ²


Какой Π±Ρ‹ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ Π²Ρ‹ Π½ΠΈ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ, Π΅Π³ΠΎ всС Ρ€Π°Π²Π½ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ². Π’.ΠΊ. ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ дольшС, Ρ‡Π΅ΠΌ SVG, Ρ‚ΠΎ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Ρƒ Π½ΠΈΡ… ΡˆΠΈΡ€Π΅ — ΠΈΡ… увидят всС, ΠΊΡ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ IE 6 ΠΈ Π±ΠΎΠ»Π΅Π΅ Π½ΠΎΠ²Ρ‹Π΅ вСрсии.


Π‘ Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, сСйчас ΠΏΠΎΠ΄Π°Π²Π»ΡΡŽΡ‰Π΅Π΅ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ соврСмСнныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π½Π° этот ΠΏΡƒΠ½ΠΊΡ‚ сильного внимания ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒ Π½Π΅ стоит. ЕдинствСнный нюанс, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ стоит ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ — IE ΠΈ Edge Π½Π΅ всСгда ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ SVG Ρ„Π°ΠΉΠ»Ρ‹.


5. ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΡŒ


И ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, ΠΈ SVG — это Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒ Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΠΈ качСства. Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΊΠ°ΠΊ тСкст, поэтому ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠ³Π»Π°ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ — ΠΈ ΠΏΡ€ΠΈ сравнСнии SVG изобраТСния выглядят Ρ‡ΡƒΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ Ρ€Π΅Π·ΠΊΠΈΠΌΠΈ, Ρ‡Π΅ΠΌ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹.


Π’Ρ‹Π²ΠΎΠ΄


Π”ΠΎ сих ΠΏΠΎΡ€ Π² срСдС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π½Π΅Ρ‚ Π΅Π΄ΠΈΠ½ΠΎΠ³ΠΎ мнСния ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ — ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΈΠ»ΠΈ SVG. Π‘ΡƒΡ‚ΡŒ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ зависит ΠΎΡ‚ поставлСнных Π·Π°Π΄Π°Ρ‡ ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π² Ρ†Π΅Π»ΠΎΠΌ.


Но всС ΠΆΠ΅ сСйчас Ρ‡Π°Ρ‰Π΅ всСго ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ SVG — Ρƒ этого языка Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ Π»ΡƒΡ‡ΡˆΠ΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΡŒ, UX (ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚), ΠΈ ΠΎΠ½ поддСрТиваСтся всСми основными Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ. БущСствуСт ΠΌΠ½Π΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ‚Ρ€Π΅Π½Π΄ΠΎΠ² 2018 Π³ΠΎΠ΄Π° — это ΡƒΡ…ΠΎΠ΄ ΠΎΡ‚ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΊ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG.


Π’ Ρ‚ΠΎ ΠΆΠ΅ врСмя ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ станут Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ для ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° с большим количСством ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² ΠΎΠ΄Π½ΠΎΠΌ стилС.


А Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅, SVG ΠΈΠ»ΠΈ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹?

ΠœΠΈΠ½ΡƒΡΡ‹ ΠΈ ΠΏΠ»ΡŽΡΡ‹ использования ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²

БущСствуСт Π΄Π²Π° ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΈΠ°Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Π½Ρ‹Ρ… способа, добавлСния ΠΈΠΊΠΎΠ½ΠΎΠΊ Π½Π° сайт:

  • Π² Π²ΠΈΠ΄Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ (растровой ΠΈΠ»ΠΈ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ)
  • Π² качСствС ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π°

РазумССтся, Ρ‡Ρ‚ΠΎ Ρƒ ΠΎΠ±ΠΎΠΈΡ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Π΅ΡΡ‚ΡŒ свои нСдостатки ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ сущСствуСт ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ³ΠΎ способа, ΠΊΠ°ΠΊ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° сайт. А Π΅ΡΡ‚ΡŒ подходящий способ, Π² зависимости ΠΎΡ‚ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ ситуации.


БСгодня ΠΌΡ‹ рассмотрим всС минусы ΠΈ ΠΏΠ»ΡŽΡΡ‹ использования Π½Π° сайтах ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ².




БраузСрная интСрпрСтация


Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ – это всСго лишь тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎ Ρ€Π°Π·Π½ΠΎΠΌΡƒ (Π±ΠΎΠ»Π΅Π΅ ΠΈΠ»ΠΈ ΠΌΠ΅Π½Π΅Π΅ Ρ€Π°Π·ΠΌΡ‹Ρ‚Ρ‹ΠΌ) Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊΠΎΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ свои Π΄Π΅Ρ„ΠΎΠ»Ρ‚Π½Ρ‹Π΅ значСния Ρƒ стилСй, касаСмыС Π»ΡŽΠ±Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ line-height. Π§Ρ‚ΠΎ Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ сказываСтся Π½Π° трудностях с ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈΠΊΠΎΠ½ΠΎΠΊ. ΠœΡ‹, Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ²Π΅Ρ€Π΅Π½Π½Ρ‹ΠΌΠΈ, Ρ‡Ρ‚ΠΎ ΠΈΠΊΠΎΠ½ΠΊΠ° Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅, Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½Π° Π½Π° 100% Ρ‚ΠΎΠΉ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚ Π½Π° своСм устройствС.


ΠžΠ΄Π½ΠΎΡ†Π²Π΅Ρ‚Π½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ


Π£ ΠΈΠΊΠΎΠ½ΠΊΠΈ нСльзя Π·Π°Π΄Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ для ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Π΅Ρ‘ частСй, ΠΎΠ½ примСнится ΠΊΠΎ всСй ΠΈΠΊΠΎΠ½ΠΊΠ΅. НСвозмоТно просто ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎΡ†Π²Π΅Ρ‚Π½ΡƒΡŽ ΠΈΠΊΠΎΠ½ΠΊΡƒ, Π±Π΅Π· Ρ…ΠΈΡ‚Ρ€ΠΎΠ³ΠΎ налоТСния ΠΈΠΊΠΎΠ½ΠΎΠΊ Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π°.


Анимация


МоТно Π·Π°Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΎ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ.


ΠŸΡƒΡΡ‚Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ ΠΈ сСмантика


ΠžΠ±Ρ‹Ρ‡Π½ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π²ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ΡΡ Π² HTML Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ Ρ‡Π΅Ρ€Π΅Π· пустыС Ρ‚Π΅Π³ΠΈ span ΠΈ i. А сами ΠΈΠΊΠΎΠ½ΠΊΠΈ выводятся Π½Π° страницу Ρ‡Π΅Ρ€Π΅Π· псСвдоэлСмСнты after ΠΈΠ»ΠΈ before. ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎ страница Π½Π°ΠΏΠΎΠ»Π½Π΅Π½Π° пустыми Ρ‚Π΅Π³Π°ΠΌΠΈ. Π‘ Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния сСмантики, это Π½Π΅ совсСм Ρ…ΠΎΡ€ΠΎΡˆΠΎ.




<span><i ></i></span>

БлоТности Π½Π° Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…


ΠŸΡ€ΠΈ Ρ€Π΅Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ сайта, довольно слоТно ΠΎΡ‚ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΊΠΈΡ…-Ρ‚ΠΎ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΡƒΠΆΠ΅ Π½Π΅Ρ‚ Π½Π° сайтС. Π’Π΅Π΄ΡŒ ΠΎΠ½ΠΈ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅ Π² Π²ΠΈΠ΄Π΅ пустых Ρ‚Π΅Π³ΠΎΠ². Π’ ΠΈΡ‚ΠΎΠ³Π΅ ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‚ΡΡ ΠΌΠ΅Ρ€Ρ‚Π²Ρ‹Π΅ стили для Π½Π΅ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… ΠΈΠΊΠΎΠ½ΠΎΠΊ.


ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½


Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ стандартный Π½Π°Π±ΠΎΡ€ ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅ΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ Π² ΡˆΡ€ΠΈΡ„Ρ‚Π΅.




Π’Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚


Иконки ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΈΠΌΠ΅ΡŽΡ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, поэтому ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΠΈ качСства (Ρ‡Π΅Π³ΠΎ Π½Π΅ скаТСшь ΠΎ растровом Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅).


CSS ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅


Для ΠΈΠΊΠΎΠ½ΠΎΠΊ доступны всС CSS стили, ΠΊΠ°ΠΊ ΠΈ для ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ². Π‘ΠΎΠ»ΡŒΡˆΠ°Ρ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ Π² ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ†Π²Π΅Ρ‚Π° являСтся бСсспорным прСимущСством.


ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ


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




ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ сторонних Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ (Font Awesome) – лишний HTTP-запрос ΠΊ сСрвСру, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ругаСтся Google PageSpeed ΠΏΡ€ΠΈ тСстС Π½Π° ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ сайта. НапримСр, ΠΏΡ€ΠΈ использовании SVG ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π½ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ запроса ΠΊ сСрвСру. ΠŸΡ€ΠΈ условии, Ρ‡Ρ‚ΠΎ SVG ΠΊΠΎΠ΄ ΠΈΠΊΠΎΠ½ΠΎΠΊ встроСн Π² HTML Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, Π° Π½Π΅ вставляСтся ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ SVG.


Но с Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ всСх ΠΈΠΊΠΎΠ½ΠΎΠΊ Π½ΡƒΠΆΠ΅Π½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ HTTP-запрос. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ запросов ΠΊ сСрвСру, ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ, нСпосрСдствСнно Π² HTML-ΠΊΠΎΠ΄.




<ul>

Β Β Β Β <li>

Β Β Β Β Β Β Β Β <img src="man.png" alt="">

Β Β Β Β </li>

Β Β Β Β <li>

Β Β Β Β Β Β Β Β <img src="female.png" alt="">

Β Β Β Β </li>

Β Β Β Β <li>

Β Β Β Β Β Β Β Β <img src="boss.png" alt="">

Β Β Β Β </li>

</ul>

Π’Ρ‹Π²ΠΎΠ΄Ρ‹


Как Π²ΠΈΠ΄ΠΈΡ‚Π΅ минусов большС, Ρ‡Π΅ΠΌ плюсов. На Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Π΅Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ SVG ΠΈΠΊΠΎΠ½ΠΊΠΈ. Волько использованиС встроСнных SVG ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π½Π΅ ΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΎΡ‰ΡƒΡ‚ΠΈΠΌΠΎΠ³ΠΎ влияния Π½Π° ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ сайта ΠΈ позволяСт Π½Π΅ Ρ‚Π΅Ρ€ΡΡ‚ΡŒ качСство ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΏΡ€ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Π΅ΠΊΡ‚ΠΎΡ€ выглядит ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΠΏΡ€ΠΈ Π»ΡŽΠ±Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€Π°Ρ… экранов.


Π£Π·Π½Π°ΠΉΡ‚Π΅ Π² этом видСокурсС всС ΠΌΠΎΠΈ сСкрСты ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠ³ΠΎ вСдСния бизнСса ΠΏΠΎ созданию сайтов Π½Π° Π·Π°ΠΊΠ°Π·.


  • Π‘ΠΎΠ·Π΄Π°Π½ΠΎ 21.02.2020 10:01:09



  • ΠœΠΈΡ…Π°ΠΈΠ» Русаков

ΠšΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² Ρ€Π°Π·Ρ€Π΅ΡˆΠ°Π΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ Π°Π²Ρ‚ΠΎΡ€Π° (ΠœΠΈΡ…Π°ΠΈΠ» Русаков) ΠΈ индСксируСмой прямой ссылкой Π½Π° сайт (http://myrusakov.ru)!

Π”ΠΎΠ±Π°Π²Π»ΡΠΉΡ‚Π΅ΡΡŒ ΠΊΠΎ ΠΌΠ½Π΅ Π² Π΄Ρ€ΡƒΠ·ΡŒΡ Π’ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅: http://vk.com/myrusakov.
Если Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄Π°Ρ‚ΡŒ ΠΎΡ†Π΅Π½ΠΊΡƒ ΠΌΠ½Π΅ ΠΈ ΠΌΠΎΠ΅ΠΉ Ρ€Π°Π±ΠΎΡ‚Π΅, Ρ‚ΠΎ Π½Π°ΠΏΠΈΡˆΠΈΡ‚Π΅ Π΅Ρ‘ Π² ΠΌΠΎΠ΅ΠΉ Π³Ρ€ΡƒΠΏΠΏΠ΅: http://vk.com/rusakovmy.

Если Π’Ρ‹ Π½Π΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ Π½Π° сайтС,
Ρ‚ΠΎ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° обновлСния: ΠŸΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° обновлСния

Если Ρƒ Вас ΠΎΡΡ‚Π°Π»ΠΈΡΡŒ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ вопросы, Π»ΠΈΠ±ΠΎ Ρƒ Вас Π΅ΡΡ‚ΡŒ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ Π²Ρ‹ΡΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρƒ этой ΡΡ‚Π°Ρ‚ΡŒΠΈ, Ρ‚ΠΎ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ свой ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ Π²Π½ΠΈΠ·Ρƒ страницы.

Если Π’Π°ΠΌ понравился сайт, Ρ‚ΠΎ размСститС ссылку Π½Π° Π½Π΅Π³ΠΎ (Ρƒ сСбя Π½Π° сайтС, Π½Π° Ρ„ΠΎΡ€ΡƒΠΌΠ΅, Π² ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅):

Π¨Ρ€ΠΈΡ„Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Simple Line Icons

ВсСм ΠΏΡ€ΠΈΠ²Π΅Ρ‚. Π¨Ρ€ΠΈΡ„Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ постСпСнно Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ Π²Ρ‹Ρ‚Π΅ΡΠ½ΡΡ‚ΡŒ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ сборки ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² растровой Π³Ρ€Π°Ρ„ΠΈΠΊΠ΅ (png, jpg ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅). ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒΒ Font Awesome Π² создании интСрфСйса сайта врядли ΠΊΡ‚ΠΎ-Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡΠΏΠ°Ρ€ΠΈΠ²Π°Ρ‚ΡŒ. Но Ρƒ этого ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ Π°Ρ€Ρ…ΠΈΠ²Π° ΠΈΠΊΠΎΠ½ΠΎΠΊ Ρ‚Π°ΠΊΠΆΠ΅ Π΅ΡΡ‚ΡŒ достаточно ΠΌΠ½ΠΎΠ³ΠΎ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΈΡ… Π°Π½Π°Π»ΠΎΠ³ΠΎΠ².


Π₯ΠΎΡ‡Ρƒ Вас ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒ с ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²Ρ‹ΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈΒ Simple Line Icons. Π’ сборкС 180 ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΊΠ°ΠΊ классичСских:Β ΡŽΠ·Π΅Ρ€, стрСлочка Π²ΠΏΡ€Π°Π²ΠΎ, Π²Π»Π΅Π²ΠΎ, Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅; Ρ‚Π°ΠΊ ΠΈ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹Ρ…: кошСлСк, Ρ€Π°ΠΊΠ΅Ρ‚Π°, ΠΊΡƒΠ±ΠΎΠΊ. Для создания интСрфСйса Π½Π° сайтС, Π’Π°ΠΌ этих ΠΈΠΊΠΎΠ½ΠΎΠΊ Ρ…Π²Π°Ρ‚ΠΈΡ‚ с Π»ΠΈΡ…Π²ΠΎΠΉ.


ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ


1. Π‘ΠΏΠ΅Ρ€Π²Π° Π½ΡƒΠΆΠ½ΠΎ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π°Ρ€Ρ…ΠΈΠ² ΠΈ Π΅Π³ΠΎ Ρ€Π°Π·Π°Ρ€Ρ…ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ


2. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π»ΠΈΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ Π½Π° сайт, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ:


  • Css Ρ„Π°ΠΉΠ»Β simple-line-icons.css ΠΈΠ· ΠΏΠ°ΠΏΠΊΠΈ css Π² Π²Π°ΡˆΡƒΒ ΠΏΠ°ΠΏΠΊΡƒ css (скорСС всСго эта ΠΏΠ°ΠΏΠΊΠ° Ρƒ вас ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ, Ρ‚Π°ΠΌΒ Π»Π΅ΠΆΠ°Ρ‚ всС ваши стили, Ссли Π½Π΅Ρ‚, Ρ‚ΠΎ создайтС Π΅Π΅)
  • ΠŸΠ°ΠΏΠΊΡƒΒ fonts Π² ΠΊΠΎΡ€Π΅Π½ΡŒ сайта

3. Π”Π°Π»Π΅Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ стили ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, ΡƒΠΆΠ΅ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹Π΅ Π½Π° сСрвСр


ДСлаСтся это ΠΎΡ‡Π΅Π½ΡŒ просто. НуТно Π² Π±Π»ΠΎΠΊ <head> (Ρ‚Π°ΠΌ Π³Π΄Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ΡΡ Ρƒ Вас всС css ΠΈ js Ρ„Π°ΠΉΠ»Ρ‹) Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ css Ρ„Π°ΠΉΠ»Π°:



<link rel="stylesheet" href="css/simple-line-icons.css">


НС Π·Π°Π±ΡƒΠ΄ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ этот Ρ„Π°ΠΉΠ» Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ Π²Π΅Π·Π΄Π΅, Π³Π΄Π΅ Ρƒ Вас Π±ΡƒΠ΄ΡƒΡ‚ ΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈΒ Simple Line Icons.


4. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ


Π­Ρ‚ΠΎ дСлаСтся ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ: Π²Β Ρ‚ΠΎΠΌ мСстС, Π³Π΄Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΡƒ, Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄:



<span></span>


Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ссли ΠΌΡ‹ поставим 



<span></span>


Ρ‚ΠΎ Ρƒ нас Π²Ρ‹ΠΉΠ΄Π΅Ρ‚ такая ΠΈΠΊΠΎΠ½ΠΊΠ°



А Π²ΠΎΡ‚ ΠΊΠΎΠ΄ иконки с тСкстом



<span></span> имя ΡŽΠ·Π΅Ρ€Π°


И выглядит ΠΎΠ½ Ρ‚Π°ΠΊ:



НС Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅, Ρ‡Ρ‚ΠΎ это ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈ с ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ с ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ, Π²Ρ‹ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ font-size, font-weight, line-height ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅


Имя ΠΈΠΊΠΎΠ½ΠΊΠΈ соотвСтствуСт ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ Π² Β«Π”Π΅ΠΌΠΎΒ». Если Π’Π°ΠΌ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»ΠΈΡΡŒ эти ΠΈΠΊΠΎΠ½ΠΊΠΈ, Ρ‚ΠΎ страницу Β«Π”Π΅ΠΌΠΎΒ» Π² Π·Π°ΠΊΠ»Π°Π΄ΠΊΠΈ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠ°ΠΊ ΡˆΠΏΠ°Ρ€Π³Π°Π»ΠΊΠ°. Π£ мСня всё! Π”ΠΎΠ±Ρ€ΠΎ!

Помогла ΡΡ‚Π°Ρ‚ΡŒΡ? Угости Ρ‡Π°ΡˆΠ΅Ρ‡ΠΊΠΎΠΉ ΠΊΠΎΡ„Π΅ =)

Π”Π΅ΡΡΡ‚ΡŒ ΠΏΡ€ΠΈΡ‡ΠΈΠ½ нашСго ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° с ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π½Π° SVG

Π£ нас Π½Π° lonelyplanet.com ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΈ Π½Π΅Π΄Π°Π²Π½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄
Π½Π°ΠΌΠΈ встала Π·Π°Π΄Π°Ρ‡Π° пСрСнСсти ΠΈΡ… ΠΈΠ· ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π² SVG-Ρ„Π°ΠΉΠ»Ρ‹. Π’ Ρ€Π°ΠΌΠΊΠ°Ρ…
этой ΡΡ‚Π°Ρ‚ΡŒΠΈ я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ нас ΠΏΡ€ΠΈΠ²Π΅Π»ΠΈ ΠΊ этому
Ρ€Π΅ΡˆΠ΅Π½ΠΈΡŽ, ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ограничСния со стороны SVG, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΌΡ‹ Π»ΠΈΡ‡Π½ΠΎ
ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΠ»ΠΈΡΡŒ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ историСй ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π½Π°ΠΌ ΡƒΠ΄Π°Π»ΠΎΡΡŒ с Π½ΠΈΠΌΠΈ
ΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΡΡ.

1. Π Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ

Π”ΠΎ Π½Π΅Π΄Π°Π²Π½Π΅Π³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° lonelyplanet.com использовался ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Ρ‘Π½Π½Ρ‹ΠΉ
ΡˆΡ€ΠΈΡ„Ρ‚, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ всС ΠΈΠΊΠΎΠ½ΠΊΠΈ Π±Ρ‹Π»ΠΈ ΡƒΠΏΠ°ΠΊΠΎΠ²Π°Π½Ρ‹ Π² ΠΎΠ΄ΠΈΠ½ Ρ„Π°ΠΉΠ» вмСстС с Π½ΠΈΠΌ, ΠΏΡ€ΠΈΡ‡Ρ‘ΠΌ
Π³Π»ΠΈΡ„Ρ‹ Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡΡŒ Π² области частного использования Unicode. Π’Π°ΠΊΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ нас
ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ устраивало, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ всСх ΠΈΠΊΠΎΠ½ΠΎΠΊ трСбовался всСго ΠΎΠ΄ΠΈΠ½
HTTP-запрос, Π½ΠΎ, Π² Ρ‚ΠΎ ΠΆΠ΅ врСмя, Π΄Π°Π½Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Π»ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ
управлСния ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ΠΎΠΌ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ рСсурсов.

Π£ нас Π΅ΡΡ‚ΡŒ нСбольшая ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΏΠΏΠ° ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… являСтся критичСски
Π²Π°ΠΆΠ½Ρ‹ΠΌ для обСспСчСния качСствСнного ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π°. Π­Ρ‚ΠΎΡ‚ ΠΊΡ€ΠΈΡ‚Π΅Ρ€ΠΈΠΉ Π½Π΅
касаСтся ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ части ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΈ для нас ΠΊΡ€Π°ΠΉΠ½Π΅ ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½Π° Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°
второстСпСнных рСсурсов послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ основного содСрТимого страницы.
Однако, ΠΏΡ€ΠΈ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ ΠΊ Ρ…Ρ€Π°Π½Π΅Π½ΠΈΡŽ ΠΈΠΊΠΎΠ½ΠΎΠΊ это Π±Ρ‹Π»ΠΎ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ.

ΠžΡ‚Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π²Π°ΠΆΠ½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΎΡ‚ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ части ΡˆΡ€ΠΈΡ„Ρ‚Π° Π΄Π°Π»ΠΎ Π½Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅
Ρ‚ΠΎΠ½ΠΊΠΎΠ³ΠΎ управлСния Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΎΠΉ рСсурсов страницы.

ΠšΠΎΠ½Ρ‚Ρ€Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚

ΠžΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡ‚ΡŒ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Ρ‘Π½Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ вовсС Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ
Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ. НавСрноС, ΠΌΡ‹ Π±Ρ‹ Ρ‚Π°ΠΊ ΠΈ сдСлали, Ссли Π±Ρ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ ΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒΡΡ
Π½Π° использовании ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π°.

2. НСкоторыС устройства Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ области частного использования Unicode

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

Π― ΡƒΠΆΠ΅ ΠΈ Π½Π΅ помню, Π½Π° ΠΊΠ°ΠΊΠΎΠΌ устройствС ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΠ» тСстированиС, ΠΊΠΎΠ³Π΄Π° ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ»,
Ρ‡Ρ‚ΠΎ ΠΎΠ΄Π½Π° ΠΈΠ· Π½Π°ΡˆΠΈΡ… ΠΈΠΊΠΎΠ½ΠΎΠΊ с Β«ΠΏΡ‚ΠΈΡ‡ΠΊΠΎΠΉΒ» Π±Ρ‹Π»Π° Π·Π°ΠΌΠ΅Π½Π΅Π½Π° ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ Ρ†Π²Π΅Ρ‚Π½ΠΎΠΉ ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ.
Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° казалась ΠΌΠ½Π΅ дилСтантской ΠΈ «сломанной», Ρ‡Ρ‚ΠΎ, Π±Π΅Π· сомнСния, послуТило
Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ стимулом для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π½Π° SVG.

3. Π§Ρ‘Ρ€Π½Ρ‹Π΅ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΈΠΊΠΈ ΠΈ крСстики Π² Opera Mini

Π”ΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ ΠΈ распознавания начСртания ΡˆΡ€ΠΈΡ„Ρ‚Π° Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅
Π±Ρ‹Π»ΠΎ просто. Π£Π²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ Π²Ρ‹ всС Π²ΠΈΠ΄Π΅Π»ΠΈ эту ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ отрисовки ΡˆΡ€ΠΈΡ„Ρ‚Π°
Awesome Π² Opera Mini:

Π― Π½Π΅ Π±ΡƒΠ΄Ρƒ Π²Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Π² подробности, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Opera Mini ΠΈ
ΠΌΠ½ΠΎΠ³ΠΈΡ… Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ ΡƒΠΆΠ΅ Ρ…ΠΎΡ€ΠΎΡˆΠΎ описаны Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΎΡ‚ @kaelig.

Если Π°Π±ΡΡ‚Ρ€Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ самой Opera Mini, я Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ здСсь особСнно Π²Π°ΠΆΠ΅Π½
Ρ‚ΠΎΡ‚ ΠΌΠΎΠΌΠ΅Π½Ρ‚, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ»ΠΈ Ρ‚ΠΎ самоС слСпоС пятно, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΡ‹ Π² ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅ Π½Π΅
Π² состоянии ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. К соТалСнию, ΠΌΡ‹ физичСски Π½Π΅ ΠΌΠΎΠΆΠ΅ΠΌ провСсти
тСстированиС Π½Π° всСх устройствах Π±Π΅Π· ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΉ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Π½Π°ΠΌ слСдуСт ΠΎΡ‚Π΄Π°Π²Π°Ρ‚ΡŒ
ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈΡ‘ΠΌΠ°ΠΌ, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ вСроятно.

На Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚, ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ долю Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ° с Opera Mini.
Однако, Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ β€” компания, связанная с сфСрой Ρ‚ΡƒΡ€ΠΈΠ·ΠΌΠ°, ΠΈ ΠΌΡ‹
обязаны прСдоставляСт свои услуги Π² Π»ΡŽΠ±Ρ‹Ρ… условиях, ΠΏΡ€ΠΈ любом качСствС
ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΊ сСти. Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ всСгда слСдуСт стрСмится Π΄Π΅Π»Π°Ρ‚ΡŒ наш сСрвис
Π±ΠΎΠ»Π΅Π΅ доступным. ΠΠ°ΠΈΠ±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΡƒΠ²Π΅Ρ€Π΅Π½Π½ΠΎΡΡ‚ΡŒ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚
Π°Π΄Π΅ΠΊΠ²Π°Ρ‚Π½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ страницы, Π½Π°ΠΌ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ SVG ΠΈ PNG.

4. Π’ послСднСС врСмя ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π² Chrome ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Π°

Π’ Chrome Canary ΠΈ Beta Π½Π΅Π΄Π°Π²Π½ΠΎ появилась ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ ошибка ΠΏΡ€ΠΈ
ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ². Если Π²Ρ‹ Π΅Ρ‘ ΠΏΠΎΠΊΠ° Π½Π΅ встрСчали, Π²ΠΊΡ€Π°Ρ‚Ρ†Π΅ β€” послС
ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠ³ΠΎ ΠΏΠ΅Ρ€ΠΈΠΎΠ΄Π° нСактивности страницы ΡˆΡ€ΠΈΡ„Ρ‚ сбрасываСтся ΠΈ замСняСтся Π½Π°
систСмный.

Когда происходит сброс ΡˆΡ€ΠΈΡ„Ρ‚Π°, ваш тСкст отобраТаСтся Π² Georgia, ΠΈ, Ρ…ΠΎΡ‚ΡŒ это ΠΈ
Π½Π΅ критичСски Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚, ΠΎΠ½ всС ΠΆΠ΅ дСйствуСт Π½Π° Π½Π΅Ρ€Π²Ρ‹. А Π²ΠΎΡ‚ ΠΊΠΎΠ³Π΄Π° Ρ‚ΠΎΡ‚
самый ΡˆΡ€ΠΈΡ„Ρ‚ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ ΠΈ Π·Π° ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ, страница Π²Π½Π΅Π·Π°ΠΏΠ½ΠΎ заполняСтся
мусором ΠΈΠ· Ρ‡Ρ‘Ρ€Π½Ρ‹Ρ… ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΈΠΊΠΎΠ², ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ Π΅ΠΉ становится Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ.

Π­Ρ‚Π° ошибка ΠΏΡ€ΠΎΡΠ²ΠΈΠ»Π°ΡΡŒ ΠΊΠ°ΠΊ Ρ€Π°Π· ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ осущСствляли ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ Π½Π° SVG. Π’
Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅, ΠΊΠΎΠ³Π΄Π° Π½Π°ΠΌ Π½Π°Ρ‡Π°Π»ΠΈ ΠΏΠΎΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹Π΅ ΠΎΡ‚Ρ‡Ρ‘Ρ‚Ρ‹ ΠΎΠ± ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠ΅Π½ΠΈΠΈ этой
ошибки Π½Π° нашСм сайтС, ΠΌΡ‹ ΡƒΠΆΠ΅ ΠΏΠ΅Ρ€Π΅ΡˆΠ»ΠΈ Π½Π° Π½ΠΎΠ²ΡƒΡŽ систСму ΠΈ Π²Π·Π΄ΠΎΡ…Π½ΡƒΠ»ΠΈ с ΠΎΠ±Π»Π΅Π³Ρ‡Π΅Π½ΠΈΠ΅ΠΌ.

ΠšΠΎΠ½Ρ‚Ρ€Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚

Π­Ρ‚Π° ошибка Ρ‚Π°ΠΊ ΠΈ Π½Π΅ Π΄ΠΎΠ±Ρ€Π°Π»Π°ΡΡŒ Π΄ΠΎ ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ сборки Chrome.

5. Π§Ρ‘Ρ‚Ρ‡Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Firefox

ΠœΡ‹ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ»ΠΈ, Ρ‡Ρ‚ΠΎ Π² Firefox наш ΡˆΡ€ΠΈΡ„Ρ‚ отобраТаСтся Ρ‡ΡƒΡ‚ΡŒ ΠΆΠΈΡ€Π½Π΅Π΅, Ρ‡Π΅ΠΌ Π²
Π΄Ρ€ΡƒΠ³ΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Когда Π΄Π΅Π»ΠΎ касаСтся тСкста, Π² этом Π½Π΅Ρ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ ΡΡ‚Ρ€Π°ΡˆΠ½ΠΎΠ³ΠΎ
(хотя, ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ Ρ‚ΠΎΠΆΠ΅ ΠΌΠ°Π»ΠΎ), Π° Π²ΠΎΡ‚ ΠΈΠ·-Π·Π° ΠΆΠΈΡ€Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ вся страница выглядит
Π½Π΅ΡƒΡ…ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ ΠΈ аляповатой. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ SVG Π½Π°ΠΌ ΡƒΠ΄Π°Π»ΠΎΡΡŒ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ
отобраТСния ΠΈΠΊΠΎΠ½ΠΎΠΊ Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ….

6. НС всСгда Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² CSS, Π²Π°ΠΌ придётся ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ
ΠΈΡ…, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойство content для Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Иногда это ΠΌΠΎΠΆΠ΅Ρ‚
Π±Ρ‹Ρ‚ΡŒ Π·Π°Ρ‚Ρ€ΡƒΠ΄Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΡƒΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ псСвдоэлСмСнты :before ΠΈ
:after, Π΄Π° ΠΈ Π½Π΅ всС элСмСнты ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ΅ содСрТимоС.

Π’ Ρ‚Π°ΠΊΠΎΠΌ случаС ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈΡ… прямо Π² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, ΠΎΠ΄Π½Π°ΠΊΠΎ Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅
получаСтся мноТСство HTML-элСмСнтов, раскиданных ΠΏΠΎ ΠΊΠΎΠ΄Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π»Π΅Π³ΠΊΠΎ
Π·Π°Ρ‚Π΅Ρ€ΡΡ‚ΡŒΡΡ Π² большом ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.

Π‘ SVG эта ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° исчСзаСт, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π²Ρ‹ Π½Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Ρ‹ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ ΠΈ
ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² этом Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ ΠΊΠ°ΠΊ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для любого
элСмСнта.

7. ΠŸΡ€ΠΎΡ‰Π΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

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

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ SVG, Π½Π°ΠΌ стало Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π»Π΅Π³Ρ‡Π΅ ΠΈΡ… ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. А для Π΅Π΄ΠΈΠ½ΠΎΠ³ΠΎ
кроссбраузСрного отобраТСния ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ background-size: cover, ΠΈ просто
Π΄Π΅Π»Π°Π΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ элСмСнта Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹ΠΌΠΈ.

8. ΠœΠ½ΠΎΠ³ΠΎΡ†Π²Π΅Ρ‚Π½Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ

Как Ρ…ΠΎΡ€ΠΎΡˆΠΎ извСстно, ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΈΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ.
Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ SVG, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ количСство Ρ†Π²Π΅Ρ‚ΠΎΠ², Π° Ρ‚Π°ΠΊΠΆΠ΅
Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… графичСских элСмСнтов.

Нам всСгда Π±Ρ‹Π»Π° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠ° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΌΠ½ΠΎΠ³ΠΎΡ†Π²Π΅Ρ‚Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ для ΠΊΠ°Ρ€Ρ‚. Π Π°Π½Π΅Π΅,
ΠΊΡ€ΠΎΠΌΠ΅ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΌΡ‹ использовали для этой Ρ†Π΅Π»ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ спрайт Π²
Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ PNG. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π½Π° SVG ΠΌΡ‹ смогли ΠΈΠ·Π±Π°Π²ΠΈΡ‚ΡŒΡΡ ΠΎΡ‚ лишнСго
спрайта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ являлся Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ запросом, Π° для нас β€”
Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ, Π½ΡƒΠΆΠ΄Π°ΡŽΡ‰ΠΈΠΌΡΡ Π² ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ΅.

ΠšΠΎΠ½Ρ‚Ρ€Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚

ΠœΠ½ΠΎΠ³ΠΎΡ†Π²Π΅Ρ‚Π½Ρ‹ΠΉ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ посрСдством налоТСния ΠΈΠΊΠΎΠ½ΠΎΠΊ.

Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это качСствСнно Ρ‚Π° Π΅Ρ‰Π΅ Π·Π°Π΄Π°Ρ‡ΠΊΠ°: Ссли ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅
кросс-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π³Π»ΠΈΡ„Π°Β β€” это довольно нСпростой фокус,
Ρ‚ΠΎ с двумя всё становится Π΅Ρ‰Ρ‘ слоТнСС.

9. SVG позволяСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΠΈ с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ

ΠœΡ‹ ΠΏΠΎΠΊΠ° Π½Π΅ воспользовались этим свойством, Π½ΠΎ, Π²ΠΏΠΎΠ»Π½Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π΅Ρ‰Ρ‘
рассмотрим Ρ‚Π°ΠΊΡƒΡŽ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ, Ρ€Π°Π· ΡƒΠΆ ΠΎΠ½Π° Ρƒ нас Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΅ΡΡ‚ΡŒ.

10. Нам Π½Π΅ Π΄Π°Π²Π°Π»Π° покоя ΠΌΡ‹ΡΠ»ΡŒ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ρ…Π°ΠΊ

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡˆΡ€ΠΈΡ„Ρ‚Π° для отобраТСния ΠΈΠΊΠΎΠ½ΠΎΠΊ Π½Π°ΠΌ всСгда казалось Ρ…Π°ΠΊΠΎΠΌ. БСсспорно,
ΠΎΠ½ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ΅Π½, ΠΎΠ΄Π½Π°ΠΊΠΎ ΡΡƒΡ‚ΡŒ всё ΠΆΠ΅ состоит Π² маскировании ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ°
ΠΏΠΎΠ΄ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠΉ.

Как насчёт прСимущСств использования ΡˆΡ€ΠΈΡ„Ρ‚Π°?

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

Π‘Ρ‚ΠΎΠΈΡ‚ ΠΏΡ€ΠΈΠ·Π½Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ Π½Π°ΠΌ Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ слоТнСС ΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΡΡ с этими ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ
Π±Π΅Π· ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹, ΠΏΡ€ΠΎΠ΄Π΅Π»Π°Π½Π½ΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ Filament Group Π½Π° Grunticon.

Π’Π°Ρ€ΠΈΠ°Ρ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π°

ΠžΠ³Ρ€ΠΎΠΌΠ½Ρ‹ΠΌ прСимущСством ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π° являСтся Π΅Π³ΠΎ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ. Π£ Π½Π΅Π³ΠΎ Π½Π΅Ρ‚
ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ Π² количСствС Π²Π°Ρ€ΠΈΠ°Ρ†ΠΈΠΉ Ρ†Π²Π΅Ρ‚Π°, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ Π² зависимости
ΠΎΡ‚ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π³ΠΎ состояния (:hover, :focus, .is-active ΠΈ Π΄Ρ€.). Π­Ρ‚ΠΎ рСдкая
Ρ€ΠΎΡΠΊΠΎΡˆΡŒ, которая ΠΎΡ‡Π΅Π½ΡŒ способствуСт ΡƒΡΠΊΠΎΡ€Π΅Π½ΠΈΡŽ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. И это ΠΎΠ΄Π½Π° ΠΈΠ· ΠΏΡ€ΠΈΡ‡ΠΈΠ½
Ρ‚ΠΎΠ³ΠΎ, ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΌΡ‹ Ρ‚Π°ΠΊ Π΄ΠΎΠ»Π³ΠΎ ΠΎΡ‚ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π»ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ Π½Π° SVG.

НашС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅

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

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

Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ‹ всСго лишь нСсколько Ρ€Π°Π· Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Π»ΠΈ ΠΎΠ΄Π½Ρƒ ΠΈ Ρ‚Ρƒ ΠΆΠ΅ ΠΈΠΊΠΎΠ½ΠΊΡƒ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ
Ρ‚ΠΎΠΌ ΠΆΠ΅ Ρ„Π°ΠΉΠ»Π΅, Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ сТался Π΄ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΊΠΈ (плюс ΠΎΠΊΠΎΠ»ΠΎ 50 Π±Π°ΠΉΡ‚ΠΎΠ²
Π½Π° GZIP-ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΠΈ). Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ практичСски любоС
количСство Π²Π°Ρ€ΠΈΠ°Ρ†ΠΈΠΉ Ρ†Π²Π΅Ρ‚Π° ΠΏΠΎΡ‡Ρ‚ΠΈ Π±Π΅Π· Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π·Π°Ρ‚Ρ€Π°Ρ‚ со стороны рСсурсов.
Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ€Π°Π±ΠΎΡ‚Ρ‹ этого ΠΏΡ€ΠΈΡ‘ΠΌΠ° Π½Π° jsFiddle.

Π­Ρ‚ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π΄Π°Π»ΠΎ Π½Π°ΠΌ Ρ‚Ρƒ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΌΡ‹ ΡƒΠΆΠ΅ считали ΡƒΡ‚Ρ€Π°Ρ‡Π΅Π½Π½ΠΎΠΉ. ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅
ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ прСимущСство Π² Π²ΠΈΠ΄Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ³ΠΎ отобраТСния
Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΡ‹ постСпСнно лишились ΠΏΡ€ΠΈ использовании ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½ΠΎΠ³ΠΎ
ΡˆΡ€ΠΈΡ„Ρ‚Π°.

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого ΠΏΡ€ΠΈΡ‘ΠΌΠ° ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ Π±Π΅Π· усилий ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌ измСнСния,
привязанныС ΠΊ ΡΠΎΡΡ‚ΠΎΡΠ½ΠΈΡŽ, измСняя ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π°.

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

ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ²

Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… Π²ΠΏΠ»ΠΎΡ‚ΡŒ Π΄ΠΎ IE8, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚
SVG. Для нашСго Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π½Π°ΠΌ Ρ‚Π°ΠΊΠΆΠ΅ Π½ΡƒΠΆΠ½Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°
background-size, которая являСтся ΠΏΠΎΡ‡Ρ‚ΠΈ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ для SVG.

НашС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅

Π£ Grunticon Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ старым вСрсиям Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ². Он
создаёт PNG-вСрсии SVG-Ρ„Π°ΠΉΠ»ΠΎΠ², ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‘Ρ‚ ΠΈΡ… старым Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌ Π² зависимости ΠΎΡ‚
Ρ‚ΠΎΠ³ΠΎ, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ ΠΎΠ½ΠΈ SVG, ΠΈΠ»ΠΈ Π½Π΅Ρ‚.

Π’ связи с отсутствиСм ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ background-size, ΠΌΡ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ для старых вСрсий
Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Π°ΡΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΎΠΊ (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½Ρ‹Π΅, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ
Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ). ΠœΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ Π±Π΅Π· этого CSS-свойства, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ измСнСния
Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² всСх исходных SVG-Ρ„Π°ΠΉΠ»ΠΎΠ², ΠΎΠ΄Π½Π°ΠΊΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ
ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ с Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°ΠΌΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΌΡ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ
ΠΈΠΊΠΎΠ½ΠΊΠΈ пСрвостСпСнной ваТности с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ Π² спрайтС.

ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΏΠΎΠ»ΠΈΡ„ΠΈΠ» background-size, ΠΎΠ΄Π½Π°ΠΊΠΎ
вскорС ΠΎΡ‚ΠΊΠ°Π·Π°Π»ΠΈΡΡŒ ΠΎΡ‚ Π½Π΅Π³ΠΎ. Π― Π±Ρ‹ ΠΊΡ€Π°ΠΉΠ½Π΅ Π½Π΅ совСтовал Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Ссли
Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ большС, Ρ‡Π΅ΠΌ для ΠΎΠ΄Π½ΠΎΠ³ΠΎ-Π΄Π²ΡƒΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.
ΠžΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ»ΠΎΡΡŒ, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ для Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ Π΄Π²ΡƒΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ постоянным сбоям Π² IE8.

Π‘Ρ‚ΠΎΠΈΠ»ΠΎ Π»ΠΈ ΠΎΠ½ΠΎ Ρ‚ΠΎΠ³ΠΎ?

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

ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ SVG Π½Π° Lonely Planet с ноября 2013 Π³ΠΎΠ΄Π°, ΠΈ ΠΏΠΎΠΊΠ° Π½ΠΈΠΊΠ°ΠΊΠΈΡ…
ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ ΠΏΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π² этой части Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π»ΠΎ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹? | Pluralsight

Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ — это ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, содСрТащиС символы ΠΈ Π³Π»ΠΈΡ„Ρ‹ вмСсто Π±ΡƒΠΊΠ² ΠΈΠ»ΠΈ Ρ†ΠΈΡ„Ρ€. Они популярны срСди Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ тСкст. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅, ΠΈΡ… Π»Π΅Π³ΠΊΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.
Они малСнькиС, поэтому Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ быстро ΠΈ (бонус!) ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈΠΌΠ΅ΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ Ρ†Π²Π΅Ρ‚, ΠΈ ΠΈΡ… Π·Π°ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ сСткС, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 16 пиксСлСй Π½Π° 16 пиксСлСй ΠΈΠ»ΠΈ 32×32. Π›ΡŽΠ±ΠΎΠΉ эффСкт CSS3 Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ смотрится Π½Π° Retina-дисплСС.Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΌΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Π°ΠΌΠΈ ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS3.
Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ — довольно простой способ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. ΠžΡ‡Π΅Π½ΡŒ просто Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ тСкста Ρ€Π°Π·Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° для Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² области просмотра, Π½ΠΎ Π³ΠΎΡ€Π°Π·Π΄ΠΎ слоТнСС ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π’Π°ΠΊΠΆΠ΅ просто ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡ… Ρ†Π²Π΅Ρ‚ ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Π½ΡŒ ΠΊ Ρ„ΠΎΡ€ΠΌΠ΅ Π·Π½Π°Ρ‡ΠΊΠ° ΡˆΡ€ΠΈΡ„Ρ‚Π°.
Π•ΡΡ‚ΡŒ нСсколько нСдостатков Π² использовании ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² со Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, хотя Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΡ… Ρ†Π²Π΅Ρ‚, Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π°. ΠŸΡ€ΡΠΌΠΎ сСйчас популярны простыС, чистыС, ΠΌΠΎΠ½ΠΎΡ…Ρ€ΠΎΠΌΠ½Ρ‹Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ это Π½Π΅ большая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, Π½ΠΎ ΠΎΠ± этом всС ΠΆΠ΅ слСдуСт Π·Π½Π°Ρ‚ΡŒ.Другая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° — Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ. Π₯отя ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² доступными, помСстив ΠΈΡ… Π² класс aria, довольно просто, ΠΎΠ± этом слСдуСт ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ.
Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΈΠ· мноТСства Ρ€Π°Π·Π½Ρ‹Ρ… мСст. Π’Ρ€ΠΈ самых популярных — Entypo, Font Awesome ΠΈ IcoMoon. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π½Π° своСм сайтС Ρ‡Π΅Ρ€Π΅Π· объявлСниС CSS @ font-face.

Entypo

CC BY-SA 3.0 прСдоставляСт Entypo бСсплатно, поэтому, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅, Π½ΠΎ ΠΎΠ½ΠΈ ΠΎΠΆΠΈΠ΄Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ†ΠΈΡŽ.Entypo Suite — это ΠΏΠ°ΠΊΠ΅Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ OpenType, TrueType ΠΈ @ font-face. Entypos Π±Ρ‹Π» создан Π”Π°Π½ΠΈΠ»ΠΎΠΌ Π‘Ρ€ΡŽΡΠΎΠΌ ΠΈ АндрСасом Π‘Π»ΠΎΠΌΠ±Π΅ΠΊΠΎΠΌ.
Π‘Π°ΠΉΡ‚ Entypo ΠΈΠΌΠ΅Π΅Ρ‚ простой интСрфСйс ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя ΠΊΠ°Ρ€Ρ‚Ρƒ пСрсонаТСй, которая являСтся ΠΏΠΎΠ»Π½Ρ‹ΠΌ справочником, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π΅Π³ΠΎ ΠΈΡ‰Π΅Ρ‚Π΅. На ваш Π²Ρ‹Π±ΠΎΡ€ Π±ΠΎΠ»Π΅Π΅ 250 ΠΈΠΊΠΎΠ½ΠΎΠΊ. Entypo 2.0 Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ для ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Twitter, Facebook, Google+, Pinterest ΠΈ Ρ‚. Π”.

Font Awesome

Font Awesome бСсплатСн ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ исходный ΠΊΠΎΠ΄.Π˜Π·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ ΠΎΠ½ Π±Ρ‹Π» Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Bootstrap, Π½ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ со всСми Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ Font Awesome, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ @fontface ΠΈ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈΡ… Π² элСмСнт ΠΈΠ»ΠΈ, Π° Π·Π°Ρ‚Π΅ΠΌ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ ΠΈΠΌ классы. Π§Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π² Font Awesome, Ρ‚Π°ΠΊ это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚, ΠΎΠ½ ΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ большой ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ ΠΈ постоянным ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ. Если Ρƒ вас Π΅ΡΡ‚ΡŒ вопросы, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² Ρ€Π°Π·Π΄Π΅Π» «БообщСство» Π½Π° ΠΈΡ… сайтС ΠΈ Π½Π°ΠΉΡ‚ΠΈ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ Π½Π° Π½ΠΈΡ….
Π•ΡΡ‚ΡŒ мноТСство Ρ€Π°Π·Π½Ρ‹Ρ… способов Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ Font Awesome Π½Π° своСм сайтС.Они ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ ΠΊΠΎΠ΄Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ Font Awesome Π½Π° ваш сайт. Font Awesome Ρ‚Π°ΠΊΠΆΠ΅ прСдоставляСт мноТСство ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… совСтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ΠΌ Π½Π° вашСм сайтС.

IcoMoon

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

ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Foundation Icon 3 | ДСтская ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΊΠ° ΠΎΡ‚ Π—Π£Π Π‘

Как ΠΎΠ½ΠΈ Π±Ρ‹Π»ΠΈ построСны

Π—Π΄Π΅ΡΡŒ, Π² ZURB, ΠΌΡ‹ создали эти Π·Π½Π°Ρ‡ΠΊΠΈ с особыми стандартами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π°ΡŽΡ‚ Π΅Π΄ΠΈΠ½Ρ‹ΠΉ голос ΠΈ ΡΡ‚ΠΈΠ»ΡŒ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π½Π°Π±ΠΎΡ€Π° ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ смоТСт Π»ΡŽΠ±ΠΈΡ‚ΡŒ, Π½Π°ΡΠ»Π°ΠΆΠ΄Π°Ρ‚ΡŒΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° своСм Π²Π΅Π±-сайтС.НСкоторыС стандарты Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚:

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

ПослС прСобразования этих Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π² ΡˆΡ€ΠΈΡ„Ρ‚ ΠΌΡ‹ Π΄Π°Π»ΠΈ Π²Π°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΈΠΌΠ΅Ρ‚ΡŒ бСсконСчноС количСство Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ², Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΈ стилСй для Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΈ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.

Как ΠΈΠΌΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этих Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΌΡ‹ упростили для вас Ρ€Π°Π±ΠΎΡ‚Ρƒ! ΠŸΡ€ΠΎΡΡ‚ΠΎ скачайтС ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈ слСдуйтС этим простым инструкциям.Π’Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π·Π°ΠΆΠΈΠ³Π°Ρ‚ΡŒ Π² ΠΌΠ³Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ ΠΎΠΊΠ°.

БлияниС стилСй

ΠžΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй ΠΏΠ°ΠΊΠ΅Ρ‚Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΆΠΈΠ²ΠΈΡ‚ΡŒ ваш Π½ΠΎΠ²Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ Π²Π΅Π±-ΡˆΡ€ΠΈΡ„Ρ‚Π°. ПослС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π²Ρ‹ смоТСтС просто ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ foundation-icons.css, ΠΈ foundation-icons. [Eot / ttf / svg / woff] прямо Π² Foundation.

ΠΠ°ΠΏΠΈΡˆΠΈΡ‚Π΅ свою Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ

ΠœΡ‹ использовали для элСмСнтов Π·Π½Π°Ρ‡ΠΊΠΎΠ². Π’Ρ‹ просто примСняСтС ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ классы, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π·Π½Π°Ρ‡ΠΊΡƒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.Π’ΠΎΡ‚ ΠΊΠ°ΠΊ выглядит Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°:

   

Π‘Ρ‚ΠΈΠ»ΡŒ ΠΏΡ€ΠΎΡ‡ΡŒ!

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ нСсколько Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ² CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… стилСй. ΠœΡ‹ сами ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Π»ΠΈ нСсколько, посмотритС ΠΈΡ…:

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹

ΠœΡ‹ собрали нСсколько ΡƒΠ΄ΠΎΠ±Π½Ρ‹Ρ… ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π»Π΅Π³ΠΊΠΎ Π²ΠΏΠΈΡˆΡƒΡ‚ΡΡ Π² ваш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Foundation!

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Foundation

Если Π²Ρ‹ Π΅Ρ‰Π΅ Π½Π΅ ΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Π»ΠΈ Foundation, ΠΌΡ‹ Π½Π°ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π΅Π³ΠΎ.Π’Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ быстрСС ΠΈ Π»ΡƒΡ‡ΡˆΠ΅ Π² ΠΊΡ€Π°Ρ‚Ρ‡Π°ΠΉΡˆΠΈΠ΅ сроки!

ΠŸΠΎΡΠ΅Ρ‚ΠΈΡ‚ΡŒ Π€ΠΎΠ½Π΄

ΠœΡ‹ΡΠ»ΠΈ?

ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ записи Π² Π±Π»ΠΎΠ³Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ говорят Π΄Ρ€ΡƒΠ³ΠΈΠ΅, ΠΈΠ»ΠΈ ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ Π½Π°ΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π΄ΡƒΠΌΠ°Π΅Ρ‚Π΅.

Π˜Ρ‰Π΅Ρ‚Π΅ старый Π½Π°Π±ΠΎΡ€?

ΠœΡ‹ ΡƒΠ΄Π°Π»ΠΈΠ»ΠΈ ΡΡ‚Π°Ρ€ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ рСализация Π±Ρ‹Π»Π° Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ доступной. Если Π²Π°ΠΌ всС Π΅Ρ‰Π΅ Π½ΡƒΠΆΠ΅Π½ доступ ΠΊ Π½ΠΈΠΌ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΈΡ… Π½Π° Playground.

ΠΈΠΊΠΎΠ½ΠΎΠΊ Π²Π΅Π±-ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² | Π‘Ρ‚ΠΈΠ»ΠΈ ΠΈ внСшний Π²ΠΈΠ΄ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Kendo

Начиная с вСрсии R1 2017, Kendo UI прСдоставляСт ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹Π΅ для Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°, ΠΈ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Ρ‹ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π΄Π°Π½Π½Ρ‹Ρ… ΠΏΠ°ΠΊΠ΅Ρ‚Π°.Π’ настоящСС врСмя доступно 577 ΠΈΠΊΠΎΠ½ΠΎΠΊ.

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

   
  

Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Kendo.

  
          ΠšΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ
    
  

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

ИспользованиС ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π² ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ интСрфСйсС (UI) СстСствСнным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ замСняСт ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΡƒΡŽ Ρ‚Π΅Ρ…Π½ΠΈΠΊΡƒ спрайтов Π·Π½Π°Ρ‡ΠΊΠΎΠ².

Π—Π½Π°Ρ‡ΠΊΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²

Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ прСимущСства, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

  • Π£Π»ΡƒΡ‡ΡˆΠ΅Π½Π½Π°Ρ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΡΡ‚ΡŒ. Π₯отя спрайты Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΡΠ²Π»ΡΡŽΡ‚ΡΡ растровыми изобраТСниями ΠΈ ΠΏΠ»ΠΎΡ…ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ, ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ, идСально выглядят Π½Π° дисплСях Retina ΠΈ Π΄Π΅Π»Π°ΡŽΡ‚ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡ‚ΠΎΠ»ΡŒ ΠΆΠ΅ простым, ΠΊΠ°ΠΊ установка ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ font-size .
  • Π£Π»ΡƒΡ‡ΡˆΠ΅Π½Π½Ρ‹Π΅ возмоТности Π΄ΠΈΠ·Π°ΠΉΠ½Π° — Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ эффСкты CSS Π½Π° Π»Π΅Ρ‚Ρƒ, Π·Π°Π΄Π°Π² Ρ†Π²Π΅Ρ‚ тСкста, Ρ‚Π΅Π½ΡŒ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… состояний взаимодСйствия. НапримСр, Π½Π° : hover .
  • Π£Π»ΡƒΡ‡ΡˆΠ΅Π½Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Π—Π½Π°Ρ‡ΠΊΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π½Π΅ зависят ΠΎΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ всСми соврСмСнными Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ.
  • УмСньшСнноС количСство HTTP-запросов. Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚, Π²Π°ΠΌ потрСбуСтся максимум нСсколько HTTP-запросов.
  • Π£ΠΌΠ΅Π½ΡŒΡˆΠ΅Π½Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π° — Ρ„Π°ΠΉΠ» Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 100 ΠšΠ‘ содСрТит ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ 500 Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… Π·Π½Π°Ρ‡ΠΊΠΎΠ².

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Kendo UI:

  1. Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ Ρ‚Π΅ΠΌΡƒ Kendo UI Π² свой ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.
  2. ΠŸΡ€ΠΈΡΠ²ΠΎΠΉΡ‚Π΅ Ρ‚Π΅Π³Ρƒ HTML k-icon класс CSS, Π·Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ слСдуСт ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ класс ΠΈΠ· списка Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ². НапримСр, элСмСнт , ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

       
      

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

   

<ΡΡ‚ΠΈΠ»ΡŒ>
    .my-custom-icon-class: before {
        content: "\ e13a"; / * ДобавляСт Π³Π»ΠΈΡ„, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π½ΠΎΠΌΠ΅Ρ€ символа Unicode * /
    }
 
  

Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ:

Π Π΅Π³ΡƒΠ»ΠΈΡ€ΠΎΠ²ΠΊΠ° Ρ€Π°Π·ΠΌΠ΅Ρ€Π°

Π—Π½Π°Ρ‡ΠΊΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Kendo UI созданы Π½Π° основС сСтки 16 пиксСлСй. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ идСального отобраТСния Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΠΉΡ‚Π΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±, сохраняя Ρ€Π°Π·ΠΌΠ΅Ρ€ Π² 16 Π΅Π΄ΠΈΠ½ΠΈΡ† (32, 48, 64 ΠΈ Ρ‚. Π”.).

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ, просто установив ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ font-size .

   
 
 
 

<ΡΡ‚ΠΈΠ»ΡŒ>
    .k-icon-32 {
        Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 32 пиксСля; / * УстанавливаСт Ρ€Π°Π·ΠΌΠ΅Ρ€ Π·Π½Π°Ρ‡ΠΊΠ° 32 пиксСлСй * /
    }

    .k-icon-48 {
        Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 48 пиксСлСй; / * УстанавливаСт Ρ€Π°Π·ΠΌΠ΅Ρ€ Π·Π½Π°Ρ‡ΠΊΠ° 48 пиксСлСй * /
    }

    .k-icon-64 {
        Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 64 пиксСлСй; / * УстанавливаСт Ρ€Π°Π·ΠΌΠ΅Ρ€ Π·Π½Π°Ρ‡ΠΊΠ° 64 пиксСлСй * /
    }
 
  

Настройка Ρ†Π²Π΅Ρ‚ΠΎΠ²

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π·Π½Π°Ρ‡ΠΊΠ°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свойство color CSS.

   
 

<ΡΡ‚ΠΈΠ»ΡŒ>
    .colored-icon {
        Ρ†Π²Π΅Ρ‚: Π·Π΅Π»Π΅Π½Ρ‹ΠΉ;
    }

  

ΠŸΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ пСрСлистывания

Π§Ρ‚ΠΎΠ±Ρ‹ Π»ΡƒΡ‡ΡˆΠ΅ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, ΠΏΠ΅Ρ€Π΅Π²Π΅Ρ€Π½ΠΈΡ‚Π΅ Π΅Π³ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… классов CSS k-flip-h ΠΈ k-flip-v .

   
 
 
 
  

Π—Π½Π°Ρ‡ΠΊΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² отсортированы ΠΏΠΎ Π³Ρ€ΡƒΠΏΠΏΠ°ΠΌ Π² зависимости ΠΎΡ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΎΠ½ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ Π²Π°ΠΌ ΠΏΡ€ΠΎΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ.

ДСйствия

  • .k-i-undo
  • .k-i-redo
  • .k-i-reset
  • .k-i-reload
    .k-i-refresh
    .k-i-ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅
  • .k-i-Π½Π΅ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅
  • .k-i-reset-sm
  • .k-i-reload-sm
    .k-i-refresh-sm
    .k-i-recurrence-sm
  • .k-i-часы
  • .k-i-calendar
  • .

  • .k-i-save
    .k-i-floppy
  • .k-i-print
    .k-i-printer
  • .k-i-edit
    .k-i-Pencil
  • .k-i-delete
    .k-i-trash
  • .k-i-attachment
    .k-i-clip
  • .k-i-attachment-45
    .k-i-clip-45
  • .k-i-link-horizontal
    .k-i-hyperlink
  • .k-i-unlink-horizontal
    .k-i-hyperlink-remove
  • .k-i-link-vertical
  • .k-i-unlink-vertical
  • .k-i-Π·Π°ΠΌΠΎΠΊ
  • .k-i-unlock
  • .k-i-set-column-position
  • .k-i-stick
  • .k-i-unstick
  • .k-i-cancel
  • .k-i-cancel-outline
  • .k-i-cancel-circle
  • .k-i-check
    .k-i-checkmark
  • .k-i-check-outline
    .k-i-checkmark-outline
    .k-i-success
  • .k-i-check-circle
    .k-i-checkmark-circle
  • .

  • .k-i-close
    .k-i-x
  • .k-i-close-outline
    .k-i-x-outline
    .k-i-error
  • .k-i-Π±Π»ΠΈΠ·ΠΊΠΈΠΉ ΠΊΡ€ΡƒΠ³
    .ΠΊ-я-Ρ…-ΠΊΡ€ΡƒΠ³
  • .k-i-plus
  • .k-i-plus-outline
  • .k-i-plus-circle
  • .k-i-minus
    .k-i-kpi-trend-equal
  • .k-i-minus-outline
  • .k-я-минус-ΠΊΡ€ΡƒΠ³
  • .k-i-div
  • .k-i-equal
  • .

  • .k-i-not-equal
  • .k-i-less-or-equal
  • .

  • .k-i-большС-ΠΈΠ»ΠΈ-Ρ€Π°Π²Π½ΠΎ
  • .k-i-sort-asc
  • .k-i-sort-desc
  • .k-i-unsort
  • .k-i-sort-clear
  • .k-i-sort-asc-sm
  • .k-i-sort-desc-sm
  • .

  • .k-i-Ρ„ΠΈΠ»ΡŒΡ‚Ρ€
  • .k-i-filter-clear
  • .k-i-filter-sm
  • .k-я-Ρ„ΠΈΠ»ΡŒΡ‚Ρ€-сортировка-asc-sm
  • .k-i-filter-sort-desc-sm
  • .

  • .k-i-Ρ„ΠΈΠ»ΡŒΡ‚Ρ€-Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ-Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅
  • .k-я-Ρ„ΠΈΠ»ΡŒΡ‚Ρ€-добавочная Π³Ρ€ΡƒΠΏΠΏΠ°
  • .k-i-login
  • .k-i-logout
  • .k-i-download
  • .k-i-upload
  • .k-i-hyperlink-open
  • .k-i-hyperlink-open-sm
  • .

  • .k-i-launch
  • .k-i-window
    .k-i-window-maximize
  • .k-i-windows
    .k-i-window-restore
    .k-i-tile
  • .k-i-window-ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ
  • .k-i-gear
    .k-i-cog
    .k-i-custom
  • .

  • .k-i-ΡˆΠ΅ΡΡ‚Π΅Ρ€Π½ΠΈ
    .k-i-cogs
  • .k-i-wrench
    .k-i-settings
  • .

  • .k-i-preview
    .k-i-eye
  • .k-i-zoom
    .k-i-search
  • .k-i-zoom-in
  • .k-i-zoom-out
  • .k-i-pan
    .k-i-move
  • .

  • .k-i-hand
  • .k-i-cursor
  • .k-i-Calculator
  • .

  • .k-i-cart
    .k-i-shopping-cart
  • .

  • .k-i-ΠΊΠΎΠ½Π½Π΅ΠΊΡ‚ΠΎΡ€
  • .k-i-plus-sm
  • .k-i-minus-sm
  • .k-i-kpi-status-deny
  • .k-i-kpi-status-hold
  • .k-i-kpi-status-open
  • .

  • .k-i-ΡˆΡ‚Ρ€ΠΈΡ…-ΠΊΠΎΠ΄
  • .k-i-barcode-outline
  • .k-i-сканСр ΡˆΡ‚Ρ€ΠΈΡ…-ΠΊΠΎΠ΄Π°
  • .k-i-qr-ΠΊΠΎΠ΄
  • .k-i-qr-code-outline
  • .k-i-qr-ΠΊΠΎΠ΄-сканСр
  • .k-i-сканСр-ΡˆΡ‚Ρ€ΠΈΡ…-ΠΊΠΎΠ΄Π°-QR-ΠΊΠΎΠ΄-сканСр
  • .k-i-подпись
  • .k-i-Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ
  • .k-i-export
  • .k-i-import

ΠžΠΏΠΎΠ²Π΅Ρ‰Π΅Π½ΠΈΡ ΠΈ увСдомлСния

  • .k-i-notification
    .k-i-bell
  • .k-i-information
    .k-i-info
  • .k-i-question
    .k-i-help
  • .k-i-warning
    .k-i-exception

ΠœΠΎΠ½Ρ‚Π°ΠΆ

  • .k-i-page-properties
  • .k-i-bold
  • .k-i-italic
  • .

  • .k-i-underline
  • .k-i-font-family
  • .

  • .k-i-Ρ†Π²Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄Π½Π΅Π³ΠΎ ΠΏΠ»Π°Π½Π°
  • .k-i-convert-Π½ΠΈΠΆΠ½ΠΈΠΉ рСгистр
  • .k-i-convert-uppercase
  • .k-i-strikethrough
  • .

  • .k-i-sub-script
  • .k-i-sup-скрипт
  • .k-i-div
  • .k-i-all
  • .

  • .k-i-h2
  • .k-i-h3
  • .k-i-h4
  • .k-i-h5
  • .k-i-h5
  • .k-i-h6
  • .k-i-list-order
    .k-i-list-numbered
  • .k-i-list-unordered
    .k-i-list-bulleted
  • .k-i-list-roman-upper
  • .k-i-list-roman-lower
  • .k-i-indent-ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅
    . k-i-indent
  • .k-i-indent-reduce
    .k-i-outdent
  • .k-i-insert-up
    .k-i-insert-top
  • .k-i-insert-middle
  • .

  • .k-i-insert-down
    .k-i-insert-bottom
  • .k-i-align-top
  • .k-i-align-middle
  • .k-i-align-bottom
  • .k-i-align-left
  • .k-i-align-center
  • .k-i-align-right
  • .k-i-align-justify
  • .k-i-align-remove
  • .k-i-text-wrap
  • .k-i-rule-horizontal
  • .k-i-table-position-left
  • .k-i-table-position-center
  • .k-i-table-position-right
  • .

  • .k-i-table-align-top-left
  • .k-i-table-align-top-center
  • .k-i-table-align-top-right
  • .k-i-table-align-middle-left
  • .k-i-table-align-middle-center
  • .

  • .k-i-table-align-middle-right
  • .

  • .k-i-table-align-bottom-left
  • .k-i-table-align-bottom-center
  • .k-i-table-align-bottom-right
  • .k-i-table-align-remove
  • .k-я-Π³Ρ€Π°Π½ΠΈΡ†Ρ‹-всС
  • .k-я-Π³Ρ€Π°Π½ΠΈΡ†Ρ‹-Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ
  • .k-я-Π³Ρ€Π°Π½ΠΈΡ†Ρ‹-Π²Π½ΡƒΡ‚Ρ€ΠΈ
  • .k-i-border-inside-horizontal
  • .

  • .k-i-border-inside-vertical
  • .k-i-border-top
  • .k-i-border-bottom
  • .k-i-border-left
  • .k-i-border-right
  • .k-i-border-no
  • .

  • .k-я-Π³Ρ€Π°Π½ΠΈΡ†Ρ‹-ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ-ΡΠΊΡ€Ρ‹Ρ‚ΡŒ
  • .k-i-form
    .k-i-border
  • .k-i-form-element
  • .k-i-code-snippet
  • .

  • .k-i-select-all
  • .k-i-button
  • .k-i-select-box
  • .k-i-calendar-date
  • .

  • .k-i-group-box
  • .

  • .k-i-textarea
  • .

  • .k-i-textbox
  • .k-я-тСкстовоС ΠΏΠΎΠ»Π΅-скрытый
  • .k-i-ΠΏΠ°Ρ€ΠΎΠ»ΡŒ
  • .k-i-paragraph-add
  • .k-i-edit-tools
  • .k-я-шаблон-ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€
  • .k-i-change-Ρ€ΡƒΡ‡Π½ΠΎΠ΅
  • .k-i-track-change
  • .k-i-track-changes-enable
  • .

  • .k-i-track-changes-accept
  • .

  • .k-i-track-changes-accept-all
  • .

  • .k-i-track-changes-ΠΎΡ‚ΠΊΠ»ΠΎΠ½ΠΈΡ‚ΡŒ
  • .k-i-track-changes-reject-all
  • .

  • .k-i-document-manager
  • .k-i-custom-icon
  • .k-я-ΡΠ»ΠΎΠ²Π°Ρ€ΡŒ-Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ
  • .k-i-image-light-dialog
    .k-i-image-insert
  • .k-я-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ
  • .k-я-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ-ΠΊΠ°Ρ€Ρ‚
  • .k-i-comment
  • .k-я-ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ-ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ
  • .k-я-ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ-ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ-всС
  • .k-i-silverlight
  • .k-i-media-manager
  • .k-i-video-external
  • .k-i-flash-ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€
  • .k-i-find-and-replace
    .k-i-find
  • .k-i-copy
    .k-i-Ρ„Π°ΠΉΠ»Ρ‹
  • .k-i-cut
  • .k-i-paste
  • .k-i-paste-as-html
  • .

  • .k-i-paste-from-word
  • .

  • .k-i-paste-from-word-strip-file
  • .k-i-paste-html
  • .

  • .k-i-paste-markdown
  • .k-i-paste-plain-text
  • .

  • .k-i-apply-format
  • .k-i-clear-css
  • .

  • .k-i-copy-format
  • .k-i-strip-all-Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅
  • .k-i-strip-css-Ρ„ΠΎΡ€ΠΌΠ°Ρ‚
  • .k-i-strip-font-elements
  • .k-i-strip-span-elements
  • .k-i-strip-word-formatting
  • .k-i-Ρ„ΠΎΡ€ΠΌΠ°Ρ‚-ΠΊΠΎΠ΄-Π±Π»ΠΎΠΊ
  • .k-i-style-builder
  • .

  • .k-я-ΠΌΠΎΠ΄ΡƒΠ»ΡŒ-ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€
  • .k-i-hyperlink-light-dialog
    .k-i-hyperlink-insert
  • .k-i-hyperlink-глобус
  • .k-я-гипСрссылка-глобус-ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ
  • .k-i-hyperlink-email
  • .

  • .ΠΊ-я-ΡΠΊΠΎΡ€ΡŒ
  • .k-i-table-light-dialog
    .k-i-table-insert
  • .k-i-table
    .k-i-table-unmerge
  • .k-я-Ρ‚Π°Π±Π»ΠΈΡ†Π°-свойства
  • .k-i-table-cell
  • .k-я-свойства-Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹-ячСйки
  • .k-я-Ρ‚Π°Π±Π»ΠΈΡ†Π°-столбСц-вставка-слСва
  • .k-i-Ρ‚Π°Π±Π»ΠΈΡ†Π°-столбСц-вставка-справа
  • .k-i-table-row-insert-Π²Ρ‹ΡˆΠ΅
  • .k-i-table-row-insert-below
  • .k-я-Ρ‚Π°Π±Π»ΠΈΡ†Π°-столбСц-ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ
  • .k-я-Ρ‚Π°Π±Π»ΠΈΡ†Π°-строка-ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ
  • .k-я-Ρ‚Π°Π±Π»ΠΈΡ†Π°-ячСйка-ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ
  • .k-я-Ρ‚Π°Π±Π»ΠΈΡ†Π°-ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ
  • .k-я-ячСйки-слияниС
  • .k-я-ячСйки-слияниС-ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ
  • .k-я-ячСйки-ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ
  • .k-i-cell-split-Horizontally
  • .

  • .k-i-cell-split-vertical
  • .k-i-pane-freeze
  • .k-i-row-freeze
  • .k-i-column-freeze
  • .k-i-toolbar-float
  • .ΠΊ-я-ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° ΠΎΡ€Ρ„ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ
  • .k-i-validation-xhtml
  • .

  • .k-i-Π΄Π°Π½Π½Ρ‹Π΅-Π²Π°Π»ΠΈΠ΄Π°Ρ†ΠΈΠΈ
  • .k-i-toggle-полноэкранный Ρ€Π΅ΠΆΠΈΠΌ
  • .k-я-Ρ„ΠΎΡ€ΠΌΡƒΠ»Π°-FX
  • .k-i-sum
  • .k-i-символ
  • .k-i-Π΄ΠΎΠ»Π»Π°Ρ€
    .k-i-currency
  • .k-i-ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚
  • .k-i-custom-format
  • .

  • .k-i-дСсятичноС-ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅
  • .k-i-дСсятичноС-ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠ΅
  • .k-i-font-size
  • .

  • .k-i-image-absolute-position
  • .k-i-strip-all-formatting
  • .k-i-crossstab
  • .

  • .k-i-table-body
  • .k-я-Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹-столбцы-Π³Ρ€ΡƒΠΏΠΏΡ‹
  • .k-i-стол-ΡƒΠ³ΠΎΠ»ΠΎΠΊ
  • .k-i-Ρ‚Π°Π±Π»ΠΈΡ†Π°-строки-Π³Ρ€ΡƒΠΏΠΏΡ‹

Π€Π°ΠΉΠ»Ρ‹ ΠΈ ΠΏΠ°ΠΏΠΊΠΈ

  • .k-i-ΠΏΠ°ΠΏΠΊΠ°
  • .k-i-folder-open
  • .k-i-folder-add
  • .k-i-folder-up
  • .k-i-folder-more
    .k-i-fields-more
  • .k-я-Π°Π³Ρ€Π΅Π³Π°Ρ‚-поля
  • .k-i-file
    .k-i-file-vertical
  • .k-i-file-add
  • .k-i-file-txt
    .k-i-txt
  • .k-i-file-csv
    .k-i-csv
  • .k-i-file-excel
    .k-i-file-xls
    .k-i-excel
    .k-i-xls
  • .

  • .k-i-file-word
    .k-i-file-doc
    .k-i-word
    .k-i-doc
  • .

  • .k-i-file-mdb
    .k-i-mdb
  • .k-i-file-ppt
    .k-i-ppt
  • .k-i-file-pdf
    .k-i-pdf
  • .k-i-file-psd
    .k-i-psd
  • .

  • .k-i-file-flash
    .k-i-flash
  • .k-i-file-config
    .k-i-config
  • .k-i-Ρ„Π°ΠΉΠ»-ascx
    .k-i-ascx
  • .k-i-file-bac
    .k-i-bac
  • .k-i-file-zip
    .k-i-zip
  • .

  • .k-i-film
  • .k-i-css3
  • .k-i-html5
  • .k-i-html
    .k-i-source-code
    .k-i-view-source
  • .k-i-css
  • .k-i-js
  • .k-i-exe
  • .k-i-csproj
  • .k-i-vbproj
  • .k-i-cs
  • .

  • .k-i-vb
  • .k-i-sln
  • .k-i-cloud
  • .k-i-file-horizontal
  • .k-i-subreport
  • .k-i-data
  • .k-i-report-header-section
  • .

  • .k-i-report-footer-section
  • .

  • .k-я-Π³Ρ€ΡƒΠΏΠΏΠ°-Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ-Ρ€Π°Π·Π΄Π΅Π»
  • .k-i-group-footer-section
  • .k-i-page-header-section
  • .

  • .k-i-page-footer-section
  • .k-i-detail-section
  • .k-i-toc-section
  • .k-i-group-section
  • .

  • .k-i-parameters
  • .k-i-data-csv
  • .

  • .k-i-data-json
  • .

  • .k-я-Π΄Π°Π½Π½Ρ‹Π΅-sql
  • .k-i-data-web
  • .

  • .k-i-group-collection
  • .

  • .k-я-ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€-логичСский
  • .k-я-ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€-Π΄Π°Ρ‚Π°-врСмя
  • .k-i-ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€-float
  • .k-i-ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€-Ρ†Π΅Π»ΠΎΠ΅ число
  • .k-i-строка-ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ²
  • .k-i-ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹-Π±Π°ΠΉΡ‚ΠΎΠ²Ρ‹ΠΉ-массив
  • .k-я-ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹-нСизвСстно
  • .k-i-toc-section-level
  • .

  • .k-i-унаслСдовано
  • .k-я-Ρ„Π°ΠΉΠ»-Π²ΠΈΠ΄Π΅ΠΎ
  • .k-я-Ρ„Π°ΠΉΠ»-Π°ΡƒΠ΄ΠΈΠΎ
  • .k-i-Ρ„Π°ΠΉΠ»-ΠΎΠ±Ρ€Π°Π·
  • .k-i-Ρ„Π°ΠΉΠ»-прСзСнтация
  • .k-я-Ρ„Π°ΠΉΠ»-Π΄Π°Π½Π½Ρ‹Π΅
  • .k-я-Ρ„Π°ΠΉΠ»-ΠΎΠ±Ρ€Π°Π· диска
  • .k-i-Ρ„Π°ΠΉΠ»-ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅
  • .k-я-Ρ„Π°ΠΉΠ»-ошибка
  • .k-я-Ρ„Π°ΠΉΠ»Ρ‹-ошибка
  • .k-i-data-rest
  • .k-i-Ρ„Π°ΠΉΠ»-ΠΌΠ°ΡˆΠΈΠ½ΠΎΠΏΠΈΡΠ½Ρ‹ΠΉ тСкст

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

  • .k-i-photo-camera
  • .

  • .k-i-image
    .k-i-photo
  • .k-i-images
  • .k-i-image-export
    .k-i-photo-export
  • .k-i-zoom-фактичСский Ρ€Π°Π·ΠΌΠ΅Ρ€
  • .k-i-zoom-best-fit
  • .k-я-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅-ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°
  • .k-i-crop
  • .k-i-Π·Π΅Ρ€ΠΊΠ°Π»ΠΎ
  • .k-i-flip-horizontal
  • .k-i-flip-vertical
  • .k-i-rotate
  • .k-i-rotate-right
  • .k-i-rotate-left
  • .k-i-brush
  • .

  • .k-i-palette
  • .k-i-paint
    .k-i-droplet
    .k-i-background
  • .

  • .k-i-line
    .k-i-shape-line
  • .k-i-ΡΡ€ΠΊΠΎΡΡ‚ΡŒ-контраст
  • .k-я-Π½Π°ΡΡ‹Ρ‰Π΅Π½Π½ΠΎΡΡ‚ΡŒ
  • .k-я-ΠΈΠ½Π²Π΅Ρ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚Π°
  • .k-i-transperancy
    .k-i-opacity
  • .k-i-greyscale
  • .k-i-blur
  • .k-i-Ρ‚ΠΎΡ‡ΠΈΠ»ΠΊΠ°
  • .k-i-shape
  • .k-i-round-corners
  • .

  • .k-i-front-element
  • .k-i-back-element
  • .k-i-forward-element
  • .k-i-backward-element
  • .k-i-align-left-element
  • .k-i-align-center-element
  • .k-i-align-right-element
  • .k-i-align-top-element
  • .k-i-align-срСдний-элСмСнт
  • .k-i-align-bottom-element
  • .k-i-align-stretch-element-horizontal
  • .

  • .k-i-align-stretch-element-vertical
  • .

  • .k-i-align-align-left-elements
  • .k-i-align-center-elements
  • .k-i-align-right-elements
  • .k-i-align-stretch-elements-horizontal
  • .

  • .k-i-align-baseline-horizontal
  • .k-i-align-top-elements
  • .k-i-align-middle-elements
  • .k-i-align-bottom-elements
  • .k-i-align-stretch-elements-vertical
  • .

  • .k-i-align-baseline-vertical
  • .k-i-justify-start-horizontal
  • .k-i-justify-center-horizontal
  • .k-i-justify-end-horizontal
  • .k-i-justify-between-horizontal
  • .k-i-justify-around-horizontal
  • .k-i-justify-start-Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ
  • .k-i-justify-center-vertical
  • .k-i-justify-end-vertical
  • .k-i-justify-between-vertical
  • .k-i-justify-around-vertical
  • .k-i-thumbnail-up
  • .k-i-thumbnail-right
  • .k-i-thumbnail-down
  • .k-i-thumbnail-left
  • .k-i-full-screen
    .k-i-full-screen
  • .k-i-full-screen-exit
    .k-i-full-screen-exit
  • .k-i-reset-color
    .k-i-paint-remove
    .k-i-background-remove
  • .k-i-align-to-grid
  • .

  • .k-i-size-to-grid
  • .k-i-make-same-size
  • .

  • .k-i-make-same-width
  • .k-i-make-same-height
  • .k-i-make-horizontal-spacing-equal
  • .k-i-Π£Π²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ расстояниС ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ
  • .k-i-reduce-horizontal-spacing
  • .k-i-remove-horizontal-spacing
  • .k-i-make-vertical-spacing-equal
  • .k-i-ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ-Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ-ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»
  • .k-i-reduce-vertical-spacing
  • .k-i-remove-vertical-spacing
  • .k-i-eyedropper
  • .

  • .k-i-snap-сСтка
  • .k-i-snap-to-gridlines
  • .

  • .k-i-snap-to-snaplines
  • .

  • .k-i-sizes
  • .k-i-color-canvas

Π‘Ρ…Π΅ΠΌΠ° ΠΈ навигация

  • .k-i-arrow-45-Π²Π²Π΅Ρ€Ρ…-Π²ΠΏΡ€Π°Π²ΠΎ
    .k-i-collapse-ne
    .k-i-resize-ne
  • .k-i-arrow-45-down-right
    .k-i-collapse-se
    .k-i-resize-se
  • .k-i-arrow-45-down-left
    .k-i-collapse-sw
    .k-i-resize-sw
  • .k-i-arrow-45-up-left
    .k-i-collapse-nw
    .k-i-resize-new
  • .k-i-arrow-60-up
    .k-i-kpi-trend-ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅
  • .k-i-arrow-60-right
  • .k-i-arrow-60-down
    .k-i-kpi-Ρ‚Ρ€Π΅Π½Π΄-ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠ΅
  • .k-i-arrow-60-слСва
  • .k-i-arrow-end-Π²Π²Π΅Ρ€Ρ…
  • .k-i-arrow-end-right
  • .k-i-arrow-end-down
  • .k-i-arrow-end-left
  • .k-i-arrow-double-60-up
  • .k-i-arrow-seek-up
  • .k-i-arrow-double-60-right
    .k-i-forward-sm
  • .k-i-arrow-seek-right
  • .k-i-arrow-double-60-down
  • .k-i-arrow-seek-down
  • .k-i-arrow-double-60-left
    .k-i-rewind-sm
  • .k-i-стрСлки-kpi
    . k-i-kpi
  • .k-i-arrow-no-change
  • .k-i-arrow-overflow-Π²Π½ΠΈΠ·
  • .k-i-arrow-chevron-up
  • .k-i-arrow-chevron-right
  • .k-i-arrow-chevron-down
  • .k-i-arrow-chevron-left
  • .k-i-arrow-up
  • .k-i-arrow-right
  • .k-i-arrow-down
  • .k-i-arrow-left
  • .k-i-arrow-Π΄Ρ€Π΅Π»ΡŒ
  • .k-i-arrow-parent
  • .k-я-стрСлка-ΠΊΠΎΡ€Π΅Π½ΡŒ
  • .k-i-стрСлки-ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°
  • .k-i-стрСлки-Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹
  • .k-i-стрСлки-своп
  • .k-i-drag-and-drop
  • .k-i -ategorize
  • .k-i-grid
  • .k-i-grid-layout
  • .k-i-group
  • .k-i-ungroup
  • .k-i-handler-drag
  • .

  • .k-i-layout
  • .k-i-layout-1-by-4
  • .k-i-layout-2-by-2
  • .k-i-layout-Π±ΠΎΠΊ ΠΎ Π±ΠΎΠΊ
  • .k-i-layout-stacked
  • .k-i-columns
  • .k-i-rows
  • .k-i-reorder
  • .k-i-menu
  • .k-i-more-vertical
  • .k-i-more-horizontal
  • .k-i-home
  • .k-i-overlap

ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅

  • .k-i-global-outline
  • .k-i-глобус
  • .k-i-marker-pin
  • .

  • .k-i-marker-pin-target
  • .k-я-ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½Ρ‹ΠΉ
  • .k-i-unpin

МСдиа

  • .k-i-play
  • .k-i-pause
  • .k-i-stop
  • .k-i-rewind
  • .k-i-forward
  • .k-i-volume-down
  • .k-i-volume-Π²Π²Π΅Ρ€Ρ…
  • .k-i-volume-off
  • .k-i-hd
  • .k-i-субтитры
  • .k-i-плСйлист
  • .k-i-audio

Π‘ΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΠ±ΠΌΠ΅Π½

  • .ΠΊ-я-акция
  • .k-i-user
  • .k-i-inbox
  • .k-i-blogger
  • .

  • .k-i-blogger-box
  • .

  • .k-я-вкусный
  • .k-i-Delicious-box
  • .k-i-digg
  • .k-i-digg-box
  • .

  • .k-i-email
    .k-i-envelop
    .k-i-letter
  • .k-i-email-box
    .k-i-envelop-box
    .k-i-letter-box
  • .k-i-facebook
  • .k-i-facebook-box
  • .

  • .k-i-google
  • .k-i-google-box
  • .

  • .k-i-google-plus
  • .k-i-google-plus-box
  • .

  • .k-i-linkedin
  • .k-i-linkedin-box
  • .k-i-myspace
  • .k-i-myspace-box
  • .k-i-pinterest
  • .

  • .k-i-pinterest-box
  • .

  • .k-i-reddit
  • .

  • .k-i-reddit-box
  • .

  • .k-я-наткнулся Π½Π°
  • .k-i-stumble-on-box
  • .ΠΊ-я-расскаТи-Π΄Ρ€ΡƒΠ³Ρƒ
  • .k-i-tell-a-friend-box
  • .k-i-tumblr
  • .k-i-tumblr-box
  • .k-i-twitter
  • .k-i-twitter-box
  • .

  • .k-i-yammer
  • .

  • .k-i-yammer-box
  • .k-я-ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅
  • .k-i-behaviornce-box
  • .

  • .k-i-dribbble
  • .k-i-dribbble-box
  • .

  • .k-i-rss
  • .

  • .k-i-rss-box
  • .

  • .k-i-vimeo
  • .

  • .k-i-vimeo-box
  • .k-i-youtube
  • .

  • .k-i-youtube-box
  • .

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ

  • .k-i-heart-outline
    .k-i-fav-outline
    .k-i-ΠΈΠ·Π±Ρ€Π°Π½Π½ΠΎΠ΅-outline
  • .k-i-heart
    .k-i-fav
    .k-i-Π»ΡŽΠ±ΠΈΠΌΡ‹ΠΉ
  • .k-i-star-outline
    .k-i-bookmark-outline
  • .k-i-star
    .k-i-bookmark
  • .

  • .k-i-checkbox
    .k-i-shape-rect
  • .k-i-checkbox-checked
  • .k-i-tri-state-undeterminate
  • .k-i-tri-state-null
  • .k-i-circle
  • .k-i-radiobutton
    .k-i-shape-circle
  • .k-i-radiobutton-checked

Π“Ρ€Π°Ρ„ΠΈΠΊΠΈ

  • .k-i-graph
  • .k-i-кластСризованный ΠΏΠΎ столбцам
  • .k-i-column-stacked
  • .k-i-column-stacked100
  • .k-i-Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½-столбцов
  • .k-i-bar-кластСризованный
  • .k-i-bar-stacked
  • .k-i-bar-stacked100
  • .k-i-bar-Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½
  • .k-i-кластСризованная ΠΎΠ±Π»Π°ΡΡ‚ΡŒ
  • .k-i-area-stacked
  • .k-i-area-stacked100
  • .k-i-area-range
  • .k-i-line-stacked
  • .k-i-line-stacked100
  • .k-i-line-markers
  • .

  • .k-i-line-stacked-markers
  • .

  • .k-i-line-stacked100-markers
  • .k-i-pie
  • .k-i-donut
  • .k-i-scatter
  • .k-i-scatter-smooth-lines-markers
  • .

  • .k-i-scatter-smooth-lines
  • .k-i-scatter-прямыС-ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹
  • .k-i-scatter-прямыС
  • .k-i-bubble
  • .

  • .k-i-подсвСчник
  • .k-i-bar
  • .k-i-radar
  • .k-i-radar-markers
  • .

  • .k-i-Ρ€Π°Π΄Π°Ρ€-Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π½Ρ‹ΠΉ
  • .k-i-rose
  • .k-i-choropleth
  • .

Stop Use Icon Fonts by Michael Irigoyen

ВсСго Π·Π° Π³ΠΎΠ΄ Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π² 1991 Π³ΠΎΠ΄Ρƒ Π±Ρ‹Π»Π° Π·Π°ΠΏΡƒΡ‰Π΅Π½Π° пСрвая Π²Π΅Π±-страница, Microsoft Π½Π°Ρ‡Π°Π»Π° ΠΏΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ, ΠΏΠΎΠΆΠ°Π»ΡƒΠΉ, самый извСстный ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚, Wingdings .Однако ΠΏΡ€ΠΎΡˆΠ»ΠΎ ΠΏΠΎΡ‡Ρ‚ΠΈ 22 Π³ΠΎΠ΄Π°, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ стали Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠ΅ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅.

Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅ at-ΠΏΡ€Π°Π²ΠΈΠ»Π° @ font-face CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ собствСнныС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ для отобраТСния тСкста. К 2011 Π³ΠΎΠ΄Ρƒ Π΅Π³ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π»ΠΈ всС основныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹. Π­Ρ‚ΠΎ ΠΏΠΎΡ€ΠΎΠ΄ΠΈΠ»ΠΎ идСю ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, состоящиС ΠΈΠ· ΠΏΠΈΠΊΡ‚ΠΎΠ³Ρ€Π°ΠΌΠΌ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Wingdings , ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ вмСсто растровых ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅. Учитывая, Ρ‡Ρ‚ΠΎ Ρ€Π΅Π°Π»ΡŒΠ½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° SVG Π²ΠΎ всСх основных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… Π½Π΅ Π±Ρ‹Π»Π° ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½ΠΎΠΉ Π΄ΠΎ Π½Π°Ρ‡Π°Π»Π° 2020 Π³ΠΎΠ΄Π°, ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ фактичСски Π±Ρ‹Π»ΠΈ способом добавлСния Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Ρ… ΠΈΠΊΠΎΠ½ΠΎΠΊ Π½Π° ваш Π²Π΅Π±-сайт.

Но ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ с самого Π½Π°Ρ‡Π°Π»Π° Π±Ρ‹Π»ΠΈ Π² ΠΊΠΎΡ€Π½Π΅ ΠΎΡˆΠΈΠ±ΠΎΡ‡Π½Ρ‹ΠΌΠΈ. И Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π² нашСм распоряТСнии полная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° SVG, ΠΏΠΎΡ€Π° ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ ΠΊΠΎΠ½Π΅Ρ† ΠΈΡ… использованию Ρ€Π°Π· ΠΈ навсСгда.

Flawed Icon Fonts

Flash of Unstyled Content (FOUC)

ΠŸΡ€ΠΈ использовании @ font-face Π²Ρ‹ Π΄Π°Π΅Ρ‚Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ HTTP-запрос для Ρ‚Ρ€Π΅Π±ΡƒΠ΅ΠΌΠΎΠ³ΠΎ Ρ„Π°ΠΉΠ»Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°. Π­Ρ‚ΠΎΡ‚ запрос Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ отправляСтся Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ. Когда Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Π°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ HTML ΠΈ всС связанныС Ρ„Π°ΠΉΠ»Ρ‹, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ Π² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅, ΠΎΠ½ строит ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΡƒΡŽ модСль Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° (DOM) Π² Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.Когда связанный ΡˆΡ€ΠΈΡ„Ρ‚ Π½Π°ΠΉΠ΄Π΅Π½, запрос запускаСтся. ВрСмя, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅ для извлСчСния ΡˆΡ€ΠΈΡ„Ρ‚Π°, ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Π²ΠΈΡΠ΅Ρ‚ΡŒ ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° рСсурса ΡˆΡ€ΠΈΡ„Ρ‚Π°, условий сСти ΠΈ оборудования ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

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

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅ : ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ Π½ΠΎΠ²Ρ‹Π΅ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ preload , Π² рСсурсах ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ FOUC. Однако это Π½Π΅ Ρ€Π΅ΡˆΠ°Π΅Ρ‚ всСх Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, описанных Π² этой ΡΡ‚Π°Ρ‚ΡŒΠ΅, ΠΈ Π½Π΅ рСкомСндуСтся.

Π”ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ

Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, ΠΊΠ°ΠΊ извСстно, ΠΏΠ»ΠΎΡ…ΠΎ подходят для доступа ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΎΡ‡Π°Ρ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρƒ Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ полагаСтся Π½Π° Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.

  1. ΠžΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ΡΡ ΠΊΠ°ΠΊ тСкст — Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΊΠ°ΠΊ тСкст, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹. Π‘ Π³ΠΎΠ΄Π°ΠΌΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ чтСния с экрана ΡΡ‚Π°Π½ΠΎΠ²ΠΈΠ»ΠΈΡΡŒ всС ΡƒΠΌΠ½Π΅Π΅, Π½ΠΎ ΠΈΠΌ всС Π΅Ρ‰Π΅ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ Ρ€Π°Π·Π»ΠΈΡ‡Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Ρ€Π°Π·Π±ΠΎΡ€Ρ‡ΠΈΠ²Ρ‹ΠΉ тСкст, Π° Ρ‡Ρ‚ΠΎ — ΠΏΠΈΠΊΡ‚ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°. Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ чтСния с экрана Π±ΡƒΠ΄ΡƒΡ‚ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ вслух тСкст, вставлСнный с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS, поэтому, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°ΡŽΡ‚ΡΡ с вашими Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ, ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ «нСпроизносимо» ΠΈΠ»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΎΠΏΡƒΡ‰Π΅Π½Ρ‹.

  2. Π’Π°Π±Π»ΠΈΡ†Π° стилСй пСрСопрСдСляСт — Π›ΡŽΠ΄ΠΈ с Π½Π°Ρ€ΡƒΡˆΠ΅Π½ΠΈΡΠΌΠΈ зрСния часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ настраиваСмыС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй для пСрСопрСдСлСния стилСй ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для посСщаСмых ΠΈΠΌΠΈ Π²Π΅Π±-сайтов, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΏΡ€ΠΎΡΡ‚ΠΈΡ‚ΡŒ ΠΈΡ… использованиС.Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… схСм, ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈΠ»ΠΈ вСса ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ начСртания ΡˆΡ€ΠΈΡ„Ρ‚Π°. Если ваш сайт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π·Π½Π°Ρ‡ΠΊΠΈ нСконтСкстным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΊΡ‚ΠΎ-Ρ‚ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠΉ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, OpenDyslexic), заставит ваши Π·Π½Π°Ρ‡ΠΊΠΈ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΈΡΡ‡Π΅Π·Π½ΡƒΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ сдСлаСт ваш Π²Π΅Π±-сайт Π½Π΅ΠΏΡ€ΠΈΠ³ΠΎΠ΄Π½Ρ‹ΠΌ для использования.

  3. НСвозмоТно ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅ — ΠŸΡ€ΠΎΡ†Π΅ΡΡ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π·Π½Π°Ρ‡ΠΊΠ° Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ использования псСвдоэлСмСнтов :: before ΠΈΠ»ΠΈ :: after .БСмантичСски псСвдоэлСмСнты :: before ΠΈ :: after ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для добавлСния космСтичСского содСрТимого ΠΊ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΌΡƒ элСмСнту. Для ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ² это ΠΈΠΌΠ΅Π΅Ρ‚ смысл, Ссли Π·Π½Π°Ρ‡ΠΎΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² контСкстС с Π΄Ρ€ΡƒΠ³ΠΈΠΌ элСмСнтом. Однако Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… случаях Π·Π½Π°Ρ‡ΠΎΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² качСствС основного элСмСнта. НапримСр, Β«Ρ…Β» для Β«Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒΒ» ΠΈΠ»ΠΈ Π΄ΠΎΠΌ для возвращСния Β«Π΄ΠΎΠΌΠΎΠΉΒ». Π‘Π°ΠΌΠΈ ΠΏΠΎ сСбС эти Π·Π½Π°Ρ‡ΠΊΠΈ Π½Π΅ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ сСмантичСской ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎΠ± ΠΈΡ… содСрТании; Π’Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π°Ρ‚ΡŒ ΠΈΠΌ ярлыки ΠΈΠ»ΠΈ ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΈΡ… Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ.

Π Π°Π·ΠΌΠ΅Ρ€ ΠΈ Ρ€Π΅ΠΌΠΎΠ½Ρ‚ΠΎΠΏΡ€ΠΈΠ³ΠΎΠ΄Π½ΠΎΡΡ‚ΡŒ

Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ — Π½Π΅Π΄Π΅ΡˆΠ΅Π²Ρ‹ΠΉ Π°ΠΊΡ‚ΠΈΠ². ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ ваш Π·Π½Π°Ρ‡ΠΎΠΊ-ΡˆΡ€ΠΈΡ„Ρ‚, ΠΎΠ½ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚ всС Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΡΠΎΠ±ΠΈΡ€Π°Π΅Ρ‚Π΅ΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² любом мСстС вашСго сайта, нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, видят ΠΎΠ½ΠΈ ΠΈΡ… всС ΠΈΠ»ΠΈ Π½Π΅Ρ‚. Π£ΠΆΠ΅ сам ΠΏΠΎ сСбС этот Ρ„Π°ΠΊΡ‚ Π΄Π΅Π»Π°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ со ΡˆΡ€ΠΈΡ„Ρ‚Π°ΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ слоТными ΠΈ довольно Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΠΌΠΈ. Если ваш ΡˆΡ€ΠΈΡ„Ρ‚ Π·Π½Π°Ρ‡ΠΊΠΎΠ² содСрТит 200 Π·Π½Π°Ρ‡ΠΊΠΎΠ², Π° Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ 10 ΠΈΠ· Π½ΠΈΡ…, Π²Ρ‹ заставляСтС посСтитСлСй Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ 190 Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ΠΈ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ увидят. Π­Ρ‚ΠΎ ΡƒΡ…ΡƒΠ΄ΡˆΠΈΡ‚ впСчатлСния вашСго посСтитСля ΠΈΠ·-Π·Π° увСличСния Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈ увСличСния FOUC.

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

Π£Ρ…ΡƒΠ΄ΡˆΠ΅Π½ΠΈΠ΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ качСства

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

Π’Ρ€ΡƒΠ΄Π½ΠΎ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ / ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ

Как Π±ΡƒΠ΄Ρ‚ΠΎ я Π½Π΅ сказал достаточно, ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ² — это Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, Π° Π²ΠΎ Π²Ρ‚ΠΎΡ€ΡƒΡŽ — ΠΈΠΊΠΎΠ½ΠΊΠΈ. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ваши Π·Π½Π°Ρ‡ΠΊΠΈ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌ CSS Π½Π° основС тСкста, Ρ‚Π°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° , ΠΌΠ΅ΠΆΠ±ΡƒΠΊΠ²Π΅Π½Π½Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» , высота строки ΠΈ Ρ‚. Π”. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π±ΠΎΠ»Π΅Π΅ слоТным ΠΈ ΠΌΠ΅Π½Π΅Π΅ согласованным.ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π³Π»ΠΈΡ„Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΌΠΎΠ½ΠΎΡ…Ρ€ΠΎΠΌΠ½Ρ‹ΠΌΠΈ, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π»ΡŽΠ±Ρ‹Π΅ стилистичСскиС измСнСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ вноситС, Π²Π»ΠΈΡΡŽΡ‚ Π½Π° вСсь Π³Π»ΠΈΡ„.

SVG ΡΠΏΠ΅ΡˆΠ°Ρ‚ Π½Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ!

Π‘ выпуском вСрсии Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Microsoft Edge Π½Π° Π±Π°Π·Π΅ Chromium Π² Π½Π°Ρ‡Π°Π»Π΅ 2020 Π³ΠΎΠ΄Π° ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠ°Ρ вСкторная Π³Ρ€Π°Ρ„ΠΈΠΊΠ° (SVG) стала ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ Π²ΠΎ всСх основных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Π”Π°ΠΆΠ΅ Π΄ΠΎ этого SVG ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π»ΠΈΡΡŒ Π²ΠΎ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… с 2012 Π³ΠΎΠ΄Π°, хотя ΠΈ с Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΊΠ°ΠΌΠΈ Π² ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ Π² Internet Explorer ΠΈ Π΄ΠΎ Chromium Edge. И ΡƒΠ³Π°Π΄Π°ΠΉ Ρ‡Ρ‚ΠΎ? SVG — это ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΡ… Π·Π½Π°Ρ‡ΠΊΠΎΠ² для Π²Π΅Π±-сайтов!

Иконки Just Work

Π”Π°Π½Π½Ρ‹Π΅ изобраТСния SVG хранятся нСпосрСдствСнно Π² вашСм HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅.Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ Π΅Π³ΠΎ, ΠΎΠ½ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ Π΅Π³ΠΎ. Π’Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΆΠ΄Π°Ρ‚ΡŒ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ Π΄Ρ€ΡƒΠ³ΠΈΡ… HTTP-запросов, ΠΊΠ°ΠΊ Π² случаС со ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ Π·Π½Π°Ρ‡ΠΊΠ°.

Π›ΡƒΡ‡ΡˆΠ°Ρ Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ

SVG ΠΈΠΌΠ΅ΡŽΡ‚ встроСнныС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… возмоТностСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π°ΡŽΡ‚ ΠΈΠΌ прСимущСство ΠΏΠ΅Ρ€Π΅Π΄ использованиСм ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² со Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ.

  • Π­Ρ‚ΠΎ сСмантичСски элСмСнты изобраТСния.
  • ΠŸΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΌΠ΅Ρ‚Π°Π΄Π°Π½Π½Ρ‹Π΅ ΠΎΡ‡Π΅Π½ΡŒ просто. ΠŸΡ€ΠΎΡΡ‚ΠΎ ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ элСмСнт </code> ΠΈΠ»ΠΈ <code> <desc> </code> Π² своСм ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ SVG. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ чтСния с экрана ΠΏΠΎΠ΄Π±Π΅Ρ€ΡƒΡ‚ эти значСния ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ Ρ‡Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ΅ для вашСго посСтитСля.А ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ SVG — это просто элСмСнты Π² вашСм HTML, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ARIA, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ <code> aria-labelledby </code>.</li></ul><h4 tabindex="-1"><span class="ez-toc-section" id="%D0%9B%D0%B5%D0%B3%D1%87%D0%B5_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%B2%D0%B0%D1%82%D1%8C"></span> Π›Π΅Π³Ρ‡Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ <span class="ez-toc-section-end"></span></h4><p> По ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠΌ, коллСкция ΠΈΠ· 100 SVG ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с WOFF2 ΠΈΠ· 100 Π·Π½Π°Ρ‡ΠΊΠΎΠ²-Π³Π»ΠΈΡ„ΠΎΠ² Π±ΡƒΠ΄Π΅Ρ‚ большС. Однако прСимущСства SVG Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅Ρ€Π΅Π²Π΅ΡˆΠΈΠ²Π°ΡŽΡ‚ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π·Π½Π°Ρ‡ΠΊΠ°.</p><p> Π‘ SVG Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π½Π°Ρ‡ΠΊΠΈ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ для этой ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ страницы, нСпосрСдствСнно Π² свой ΠΊΠΎΠ΄. Π‘Π°ΠΌΡ‹ΠΉ эффСктивный способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это — ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт SVG <code> <defs> </code> для ΠΎΠ΄Π½ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎΠ³ΠΎ опрСдСлСния Π²Π°ΡˆΠΈΡ… Π·Π½Π°Ρ‡ΠΊΠΎΠ², Π° Π·Π°Ρ‚Π΅ΠΌ ΡΡΡ‹Π»Π°Ρ‚ΡŒΡΡ Π½Π° Π½ΠΈΡ… с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнта <code> <use> </code>.Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Π²ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ свои Π·Π½Π°Ρ‡ΠΊΠΈ SVG, ΠΎΠ΄Π½Π°ΠΊΠΎ, Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Π·Π½Π°Ρ‡ΠΎΠΊ нСсколько Ρ€Π°Π· Π½Π° ΠΎΠ΄Π½ΠΎΠΉ страницС, Π²Ρ‹ просто ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚Π΅ ΠΎΠ±Ρ‰ΠΈΠΉ вСс страницы.</p><blockquote><p> <strong> ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: </strong> Если Π²Ρ‹ создаСтС одностраничноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ (SPA), ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ раздСлСния ΠΊΠΎΠ΄Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ².</p></blockquote><p> Π•Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ прСимущСство состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΠ΅ Π΅Π³ΠΎ Ρ„Π°ΠΉΠ»Ρ‹ CSS Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ вашСго сайта. ΠžΠ±Ρ‹Ρ‡Π½ΠΎΠΉ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΎΠΉ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ для Π·Π½Π°Ρ‡ΠΊΠΎΠ², являСтся Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π½ΡƒΠΆΠ½Ρ‹Ρ… Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈ восстановлСниС мСньшСго ΡˆΡ€ΠΈΡ„Ρ‚Π°, Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‰Π΅Π³ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ эти Π·Π½Π°Ρ‡ΠΊΠΈ.ИспользованиС Π·Π½Π°Ρ‡ΠΊΠΎΠ² SVG позволяСт Π΄Π΅Π»Π°Ρ‚ΡŒ это Π² Π±Π°Π·Π΅ ΠΊΠΎΠ΄Π° Π±Π΅Π· нСобходимости создания рСсурсов ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π²ΠΎ Π²Π½Π΅ΡˆΠ½ΠΈΡ… инструмСнтах.</p><h4 tabindex="-1"><span class="ez-toc-section" id="%D0%A7%D0%B5%D1%82%D0%BA%D0%B8%D0%B5_%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F"></span> Π§Π΅Ρ‚ΠΊΠΈΠ΅ изобраТСния <span class="ez-toc-section-end"></span></h4><p> SVG — это прямыС Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ изобраТСния. ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ сглаТивания, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ вашим Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ ΠΈΠ»ΠΈ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмой для тСкста, Π½Π΅ Π²Π»ΠΈΡΡŽΡ‚ Π½Π° SVG, ΠΈ ваши Π·Π½Π°Ρ‡ΠΊΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎ Ρ‡Π΅Ρ‚Ρ‡Π΅.</p><h4 tabindex="-1"><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%BB%D0%BD%D1%8B%D0%B9_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82_%D1%83%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F_CSS"></span> ΠŸΠΎΠ»Π½Ρ‹ΠΉ элСмСнт управлСния CSS <span class="ez-toc-section-end"></span></h4><p> Π‘ SVG Ρƒ вас Π΅ΡΡ‚ΡŒ доступ ΠΊΠΎ всСм Ρ‚Π΅ΠΌ ΠΆΠ΅ элСмСнтам управлСния CSS, Ρ‡Ρ‚ΠΎ ΠΈ со ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ, ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠΌΡƒ Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ! Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ части Π·Π½Π°Ρ‡ΠΊΠ°, состоящСго ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… частСй, ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· Π½ΠΈΡ… свой ΡΡ‚ΠΈΠ»ΡŒ.Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты управлСния CSS, спСцифичныС для SVG, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ свойство <code> stroke </code>.</p><p> ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, SVG просто ΠΈΠΌΠ΅ΡŽΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€. На Π½ΠΈΡ… Π½Π΅ Π²Π»ΠΈΡΡŽΡ‚ тСкстовыС ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS.</p><h4 tabindex="-1"><span class="ez-toc-section" id="%D0%94%D1%80%D1%83%D0%B3%D0%B8%D0%B5_%D1%81%D0%BE%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F"></span> Π”Ρ€ΡƒΠ³ΠΈΠ΅ сообраТСния <span class="ez-toc-section-end"></span></h4><p> Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ использованиС SVG Π½Π° своСм сайтС, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ слСдуСтС Π΄Ρ€ΡƒΠ³ΠΈΠΌ распространСнным рСкомСндациям:</p><ul><li> <strong> ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΠΉΡ‚Π΅ свои SVG </strong> — ЗапуститС изобраТСния SVG Ρ‡Π΅Ρ€Π΅Π· ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ‚ΠΎΡ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€. (Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ, Ссли Π½Π΅ всС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹ SVG, Π΄Π΅Π»Π°ΡŽΡ‚ это ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.)</li><li> <strong> Π’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ сТатиС </strong> — НастройтС свой сСрвСр для ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΈ всСх тСкстовых рСсурсов (HTML, JS, CSS) с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Brotli (ΠΈΠ»ΠΈ GZIP). Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ SVG Π² ваши Ρ„Π°ΠΉΠ»Ρ‹ HTML ΠΈ / ΠΈΠ»ΠΈ JS.</li><li> <strong> ΠšΡΡˆΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ эффСктивно </strong> — УстановитС ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΊΠ΅ΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ посСтитСли Π·Π°Π³Ρ€ΡƒΠΆΠ°Π»ΠΈ Ρ„Π°ΠΉΠ»Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ ΠΈΡ… измСнСния. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ваши SVG-Ρ„Π°ΠΉΠ»Ρ‹ Π±ΡƒΠ΄ΡƒΡ‚ Ρ‡Π°ΡΡ‚ΡŒΡŽ Π²Π°ΡˆΠΈΡ… Ρ„Π°ΠΉΠ»ΠΎΠ² HTML ΠΈ / ΠΈΠ»ΠΈ JS, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ посСтитСли Π·Π°Π³Ρ€ΡƒΠΆΠ°Π»ΠΈ ΠΈΡ… снова, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли ΠΎΠ½ΠΈ измСнятся.</li></ul><h3 tabindex="-1"><span class="ez-toc-section" id="%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B_%D1%81%D0%BE_%D0%B7%D0%BD%D0%B0%D1%87%D0%BA%D0%B0%D0%BC%D0%B8_SVG"></span> Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ со Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ SVG <span class="ez-toc-section-end"></span></h3><p> Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ основных Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ SVG.Π”Π²Π΅ популярныС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ², Material Design Icons ΠΈ Font Awesome, содСрТат ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· <code> npm </code>.</p><p> Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· основных Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ Π·Π½Π°Ρ‡ΠΊΠΎΠ² Ρ‚Π°ΠΊΠΆΠ΅ выпустили ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹ для Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ популярных, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ довольно быстро. НапримСр, Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ React, ΠΈ Ρƒ Material Design, ΠΈ Ρƒ Font Awesome Π΅ΡΡ‚ΡŒ простыС Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ:</p><ul><li><p> <strong> Material Design Icons </strong> — @ mdi / react & @ mdi / js</p><pre> <code> import Icon from '@ mdi / Ρ€Π΅Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ '; ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ {mdiCoffee} ΠΈΠ· '@ mdi / js'; константный элСмСнт = <ΠŸΡƒΡ‚ΡŒ ΠΊ Π·Π½Π°Ρ‡ΠΊΡƒ = {mdiCoffee} size = {1} />; </code> </pre></li><li><p> <strong> Font Awesome </strong> — @ fortawesome / react-fontawesome & @ fortawesome / free-solid-svg-icons</p><pre> <code> ΠΈΠΌΠΏΠΎΡ€Ρ‚ {FontAwesomeIcon} ΠΈΠ· '@ fortawesome / react-fontawesome'; ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ {faCoffee} ΠΈΠ· '@ fortawesome / free-solid-svg-icons'; const element = <FontAwesomeIcon icon = {faCoffee} />; </code> </pre></li></ul><blockquote><p> <strong> ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: </strong> Оба этих Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅, ΠΈΠ·-Π·Π° тряски Π΄Π΅Ρ€Π΅Π²Π°.</p></blockquote><h3 tabindex="-1"><span class="ez-toc-section" id="%D0%97%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5"></span> Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ <span class="ez-toc-section-end"></span></h3><p> ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ использования ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² для ΠΈΠΊΠΎΠ½ΠΎΠΊ — это Π²Ρ€Π΅Π΄ для посСтитСлСй ΠΈ врСмя для вас. ЗамСняя ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ ΡˆΡ€ΠΈΡ„Ρ‚Π° Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π½Π° Π·Π½Π°Ρ‡ΠΊΠΈ SVG, Π²Ρ‹ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚Π΅ людям ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, ΡƒΠ»ΡƒΡ‡ΡˆΠ°Ρ качСство, Ρ‡Π΅Ρ‚ΠΊΠΎΡΡ‚ΡŒ ΠΈ Π½Π°Π΄Π΅ΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Π°ΡˆΠΈΡ… Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΈ сокращая врСмя Π½Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΡ… рСсурсов. И Ссли Π²Ρ‹ случайно Π½Π°Ρ‚ΠΊΠ½ΡƒΠ»ΠΈΡΡŒ Π½Π° эту ΡΡ‚Π°Ρ‚ΡŒΡŽ, ΠΏΡ‹Ρ‚Π°ΡΡΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, слСдуСт Π»ΠΈ Π²Π°ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈΠ»ΠΈ Π½Π΅Ρ‚, я надСюсь, Ρ‡Ρ‚ΠΎ ΠΎΡ‚Π²Π΅Ρ‚ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π΅Π½.</p><h2><span class="ez-toc-section" id="%D0%A1%D0%B5%D0%BC%D0%B0%D0%BD%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D0%B8%D0%B4%D0%B5%D0%BD%D1%82%D0%B8%D1%84%D0%B8%D0%BA%D0%B0%D1%86%D0%B8%D1%8F_%D0%B7%D0%BD%D0%B0%D1%87%D0%BA%D0%B0_%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%B0_%D1%81_%D0%BF%D0%BE%D0%BC%D0%BE%D1%89%D1%8C%D1%8E_role_%C2%ABimg%C2%BB"></span> БСмантичСская идСнтификация Π·Π½Π°Ρ‡ΠΊΠ° ΡˆΡ€ΠΈΡ„Ρ‚Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ role = «img» <span class="ez-toc-section-end"></span></h2><h3><span class="ez-toc-section" id="%D0%9E%D0%BF%D0%B8%D1%81%D0%B0%D0%BD%D0%B8%D0%B5"></span> ОписаниС <span class="ez-toc-section-end"></span></h3><p> ЦСль этого ΠΌΠ΅Ρ‚ΠΎΠ΄Π° — ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ сСмантичСски ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт.<br /> ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ„Π°ΠΉΠ» ΡˆΡ€ΠΈΡ„Ρ‚Π° для Π·Π½Π°Ρ‡ΠΊΠΎΠ². Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ пСрСопрСдСляСт сСмСйство ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², эти Π·Π½Π°Ρ‡ΠΊΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ<br /> исчСзнут, Ссли Π½Π΅Ρ‚ возмоТности ΠΈΡ… ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π”Π΅Π»ΠΎ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π΅Ρ…Π½ΠΈΠΊΡƒ<br /> Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΎΡ‚ ΠΎΠ±Ρ‰Π΅Π³ΠΎ использования ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² (тСкста).</p><p> НСкоторым ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ с ослаблСнным Π·Ρ€Π΅Π½ΠΈΠ΅ΠΌ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй, сцСнарии ΠΈΠ»ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ для пСрСопрСдСлСния<br /> ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π½Π° страницС для восприятия тСкстового содСрТимого.Однако ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠΌΠ΅Ρ‚ΡŒ Π²ΠΎΡΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ<br /> Π·Π½Π°Ρ‡ΠΈΠΌΡ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π·Π²Π΅Π·Π΄ΠΎΡ‡ΠΊΠ°, ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‰Π°Ρ ΠΈΠ·Π±Ρ€Π°Π½Π½ΠΎΠ΅, ΠΈΠ»ΠΈ элСктронноС письмо<br /> Π·Π½Π°Ρ‡ΠΎΠΊ Π² ссылкС.</p><p> ΠšΠ»ΡŽΡ‡ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π°Π²Ρ‚ΠΎΡ€ сСмантичСски Ρ€Π°Π·ΠΌΠ΅Ρ‡Π°Π» ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π·Π½Π°Ρ‡ΠΊΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ <code> role = "img" </code>. Π—Π°Ρ‚Π΅ΠΌ сСлСктор Π·Π°ΠΌΠ΅Π½Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡ ΠΊ этой сСмантикС ΠΈ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ<br /> <code> Ρ€ΠΎΠ»ΡŒ = "img" </code>. Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ этих Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ².</p><p> ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ шаг ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для добавлСния начСртания ΡˆΡ€ΠΈΡ„Ρ‚Π° с ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ Ρ‡Π΅Ρ€Π΅Π· Ρ„Π°ΠΉΠ» CSS.= «icon-«],<br /> [класс * = «Π·Π½Π°Ρ‡ΠΎΠΊ-«] {сСмСйство ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²: ‘IconFontRoleImg’! important; }</p><p>/ * ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ класс для Π·Π½Π°Ρ‡ΠΊΠ° * /<br /> .icon-star-bg: Π΄ΠΎ {содСрТимого: «\ e982»; }<br /> </code></p><p> На Π²Ρ‚ΠΎΡ€ΠΎΠΌ этапС Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ классы, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ role = «img» для сСмантики ΠΈ доступный<br /> имя.</p><pre> <code> <! - Π—Π½Π°Ρ‡ΠΎΠΊ Ρ‡Π΅Ρ€Π΅Π· ΠΈΠΌΠ΅Π½Π° классов, role = "img" ΠΈ Ρ‚Π΅ΠΊΡΡ‚ΠΎΠ²ΡƒΡŽ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρƒ -> <p> <span role = "img" aria-label = "Favorite"> </span> </p> </code> </pre><p> На Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ΠΌ этапС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ сСлСктор Β«: notΒ» Π² сочСтании с «сСлСктором [Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚]Β»<br /> для Π·Π°ΠΌΠ΅Π½Ρ‹ начСртания ΡˆΡ€ΠΈΡ„Ρ‚Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ тСкста.</p><pre> <code> / * ЗамСняСт Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ ΡˆΡ€ΠΈΡ„Ρ‚Π°, Π½ΠΎ ΠΈΡΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ всС элСмСнты с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ role = "" img "* / *: not ([role = "img"]) {сСмСйство ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²: Verdana, sans-serif! important; } </code> </pre><h2><span class="ez-toc-section" id="Icon_Fonts_-_Vuetify"></span> Icon Fonts — Vuetify <span class="ez-toc-section-end"></span></h2><p> Vuetify поставляСтся с Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΎΠΉ с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ Π·Π½Π°Ρ‡ΠΊΠΎΠ² Material Design, Material Icons, Font Awesome 4 ΠΈ Font Awesome 5. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ прилоТСния Π±ΡƒΠ΄ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ Material Design ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.</p><h3><span class="ez-toc-section" id="_%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%BE%D0%B2_%D0%B7%D0%BD%D0%B0%D1%87%D0%BA%D0%BE%D0%B2"></span> # Установка ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ² <span class="ez-toc-section-end"></span></h3><p> Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½Π½ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Π·Π½Π°Ρ‡ΠΊΠΎΠ² (Π΄Π°ΠΆΠ΅ Ссли ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ).Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Π²ΠΊΠ»ΡŽΡ‡ΠΈΠ² ссылку Π½Π° CDN ΠΈΠ»ΠΈ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π² Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π² вашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.</p><h4><span class="ez-toc-section" id="_%D0%97%D0%BD%D0%B0%D1%87%D0%BA%D0%B8_%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B0_%D0%BC%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D0%B0%D0%BB%D0%BE%D0%B2"></span> # Π—Π½Π°Ρ‡ΠΊΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² <span class="ez-toc-section-end"></span></h4><p> Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ этот инструмСнт для поиска Π»ΡŽΠ±Ρ‹Ρ… Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² ΠΈ копирования ΠΈΡ… Π² Π±ΡƒΡ„Π΅Ρ€ ΠΎΠ±ΠΌΠ΅Π½Π°, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² элСмСнт.</p><p> Π­Ρ‚ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚ Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для Vuetify. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ‡Π΅Ρ€Π΅Π· CDN:</p><pre> <code> </code> </pre><p> Или ΠΊΠ°ΠΊ локальная Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ:</p><pre> <code> $ yarn add @ mdi / font -D // Π˜Π›Π˜ $ npm install @ mdi / font -D </code> </pre><pre> <code> import '@ mdi / font / css / materialdesignicons.css ' ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vue ΠΈΠ· 'vue' ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vuetify ΠΈΠ· vuetify / lib Vue.use (Vuetify) ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ Vuetify ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ({ icons: { iconfont: 'mdi', }, }) </code> </pre><h4><span class="ez-toc-section" id="_%D0%97%D0%BD%D0%B0%D1%87%D0%BA%D0%B8_%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD%D0%B0_%D0%BC%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D0%B0%D0%BB%D0%BE%D0%B2_-_JS_SVG"></span> # Π—Π½Π°Ρ‡ΠΊΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² — JS SVG <span class="ez-toc-section-end"></span></h4><p> Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΡƒΡ‚ΠΈ SVG, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ Π² @ mdi / js. Π­Ρ‚ΠΎ рСкомСндуСмая установка ΠΏΡ€ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ вашСго прилоТСния для производства. Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π’ΠžΠ›Π¬ΠšΠž <strong> </strong>, Ссли Π²Ρ‹ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ большС Π·Π½Π°Ρ‡ΠΊΠΎΠ² ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.</p><pre> <code> $ пряТа Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ @ mdi / js -D // Π˜Π›Π˜ $ npm install @ mdi / js -D </code> </pre><p> Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ <strong> mdiSvg </strong> iconfont:</p><pre> <code> ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vue ΠΈΠ· 'vue' ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vuetify ΠΈΠ· vuetify / lib Vue.ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ (Vuetify) ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ Vuetify ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ({ icons: { iconfont: 'mdiSvg', }, }) </code> </pre><p> Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠΌΠΏΠΎΡ€Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π²Π°ΠΌΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ², прСдоставляя Π³ΠΎΡ€Π°Π·Π΄ΠΎ мСньший Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΏΠ°ΠΊΠ΅Ρ‚Π°.</p><pre> <code> <шаблон> <v-icon> {{svgPath}} </v-icon> </template> <сцСнарий> ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ {mdiAccount} ΠΈΠ· '@ mdi / js' экспорт ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ { Π΄Π°Π½Π½Ρ‹Π΅: () => ({ svgPath: mdiAccount }), } </script> </code> </pre><h4><span class="ez-toc-section" id="_%D0%97%D0%BD%D0%B0%D1%87%D0%BA%D0%B8_%D0%BC%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D0%B0%D0%BB%D0%BE%D0%B2"></span> # Π—Π½Π°Ρ‡ΠΊΠΈ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² <span class="ez-toc-section-end"></span></h4><p> Установка такая ΠΆΠ΅, ΠΊΠ°ΠΊ описано Π²Ρ‹ΡˆΠ΅.Для ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π±Π΅Π· процСсса сборки рСкомСндуСтся ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈΠ· CDN</p><pre> <code> </code> </pre><p> Π’ качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ локально, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ пряТу ΠΈΠ»ΠΈ NPM. Π˜ΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ это Π½Π΅ ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π΅ΠΏΠΎΠ·ΠΈΡ‚ΠΎΡ€ΠΈΠΉ Google ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ обновлСния</p><pre> <code> $ yarn add material-design-icons-iconfont -D // Π˜Π›Π˜ $ npm ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»-Π΄ΠΈΠ·Π°ΠΉΠ½-Π·Π½Π°Ρ‡ΠΊΠΈ-Π·Π½Π°Ρ‡ΠΎΠΊ-ΡˆΡ€ΠΈΡ„Ρ‚ -D </code> </pre><p> ПослС установки ΠΏΠ°ΠΊΠ΅Ρ‚Π° ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ Π² свой основной Ρ„Π°ΠΉΠ» js.ΠžΠ±Ρ‹Ρ‡Π½ΠΎ это <code> main.js </code>, <code> index.js </code> ΠΈΠ»ΠΈ <code> app.js </code>, располоТСнный Π² ΠΏΠ°ΠΏΠΊΠ΅ <code> src / </code>. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ SSR, Ρƒ вас ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ„Π°ΠΉΠ» <code> client.js </code> ΠΈΠ»ΠΈ <code> entry-client.js </code>.</p><pre> <code> import 'material-design-icons-iconfont / dist / material-design-icons.css' ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vue ΠΈΠ· 'vue' ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vuetify ΠΈΠ· vuetify / lib Vue.use (Vuetify) ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ Vuetify ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ({ icons: { iconfont: 'md', }, }) </code> </pre><h4><span class="ez-toc-section" id="_Font_Awesome_4_Icons"></span> # Font Awesome 4 Icons <span class="ez-toc-section-end"></span></h4><p> Π’ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ Π²Ρ‹ΡˆΠ΅.Π‘Π°ΠΌΡ‹ΠΉ простой способ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ это Π² своСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ — ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ FontAwesome Ρ‡Π΅Ρ€Π΅Π· cdn:</p><pre> <code> </code> </pre><p> Установка FontAwesome <strong> 4 </strong> такая ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ новая вСрсия, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ· Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ рСпозитория. Π’Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π½Π°Ρ†Π΅Π»Π΅Π½Ρ‹ Π½Π° Ρ€Π΅ΠΏΠΎ </code> с ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ <code>, Π° Π½Π΅ Π½Π° <code> @fortawesome </code>.</p><pre> <code> $ пряТа Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ font-awesome@4.7.0 -D // Π˜Π›Π˜ $ npm ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ font-awesome@4.7.0 -D </code> </pre><p> НС Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅, ваш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ€Π°ΡΠΏΠΎΠ·Π½Π°Π²Π°Ρ‚ΡŒ CSS. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ webpack, установитС ΠΈ настройтС Π·Π°Π³Ρ€ΡƒΠ·Ρ‡ΠΈΠΊ css.</p><pre> <code> ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ 'font-awesome / css / font-awesome.min.css' ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vue ΠΈΠ· 'vue' ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vuetify ΠΈΠ· vuetify / lib Vue.use (Vuetify) ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ Vuetify ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ({ icons: { iconfont: 'fa4', }, }) </code> </pre><h4><span class="ez-toc-section" id="_Font_Awesome_5_Icons"></span> # Font Awesome 5 Icons <span class="ez-toc-section-end"></span></h4><p> Π‘Π°ΠΌΡ‹ΠΉ простой способ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ с <strong> FontAwesome </strong> - ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚-диск.Π’ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ вашСго основного <code> index.html </code> помСститС этот Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚:</p><pre> <code> </code> </pre><p> Для локальной установки Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π±Π΅ΡΠΏΠ»Π°Ρ‚Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ <strong> FontAwesome </strong>, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΉ Π²Π°ΠΌΠΈ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ²:</p><pre> <code> $ yarn add @ fortawesome / fontawesome-free -D // Π˜Π›Π˜ $ npm install @ fortawesome / fontawesome-free -D </code> </pre><p> Π’ основной Ρ‚ΠΎΡ‡ΠΊΠ΅ Π²Ρ…ΠΎΠ΄Π° просто ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ <strong> всСх ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ².css </strong>. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ настроСнный ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ webpack, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Ρ„Π°ΠΉΠ»ΠΎΠ² <code> .css ΠΈ </code> с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π·Π°Π³Ρ€ΡƒΠ·Ρ‡ΠΈΠΊΠ° css webpack. Если Π²Ρ‹ ΡƒΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Vue CLI, это Π±ΡƒΠ΄Π΅Ρ‚ сдСлано автоматичСски.</p><pre> <code> ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ '@ fortawesome / fontawesome-free / css / all.css' ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vue ΠΈΠ· 'vue' ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vuetify ΠΈΠ· vuetify / lib Vue.use (Vuetify) ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ Vuetify ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ({ icons: { iconfont: 'fa', }, }) </code> </pre><h4><span class="ez-toc-section" id="_Font_Awesome_SVG_Icons"></span> # Font Awesome SVG Icons <span class="ez-toc-section-end"></span></h4><p> Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ зависимости.</p><pre> <code> $ yarn add @ fortawesome / fontawesome-svg-core @ fortawesome / vue-fontawesome @ fortawesome / free-solid-svg-icons -D // ΠΈΠ»ΠΈ $ npm install @ fortawesome / fontawesome-svg-core @ fortawesome / vue-fontawesome @ fortawesome / free-solid-svg-icons -D </code> </pre><p> Π—Π°Ρ‚Π΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ глобально <code> font-awesome-icon </code> ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΈ установитС <code> faSvg </code> ΠΊΠ°ΠΊ iconfont Π² ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ Vuetify.</p><pre> <code> ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vue ΠΈΠ· 'vue' ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vuetify ΠΈΠ· vuetify / lib ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ {Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ} ΠΈΠ· '@ fortawesome / fontawesome-svg-core' ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ {FontAwesomeIcon} ΠΈΠ· '@ fortawesome / vue-fontawesome' ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ {fas} ΠΈΠ· '@ fortawesome / free-solid-svg-icons' Vue.ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ('font-awesome-icon', FontAwesomeIcon) library.add (fas) Vue.use (Vuetify) ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ Vuetify ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ({ icons: { iconfont: 'faSvg', }, }) </code> </pre><h3><span class="ez-toc-section" id="_%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%BD%D0%B0%D1%81%D1%82%D1%80%D0%B0%D0%B8%D0%B2%D0%B0%D0%B5%D0%BC%D1%8B%D1%85_%D0%B7%D0%BD%D0%B0%D1%87%D0%BA%D0%BE%D0%B2"></span> # ИспользованиС настраиваСмых Π·Π½Π°Ρ‡ΠΊΠΎΠ² <span class="ez-toc-section-end"></span></h3><p> Допустим, вашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ настраиваСмый Π·Π½Π°Ρ‡ΠΎΠΊ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ Vuetify. ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚-ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΡƒ ΠΈΠ»ΠΈ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ появляСтся, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° глобальном ΡƒΡ€ΠΎΠ²Π½Π΅.</p><pre> <code> ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vue ΠΈΠ· 'vue' ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vuetify ΠΈΠ· vuetify / lib Vue.ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ (Vuetify) ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ Vuetify ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ({ icons: { iconfont: 'fa', цСнности: { ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ: 'fas fa-ban', мСню: 'fas fa-ellipsis-v', }, }, }) </code> </pre><p> Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π½Π°Π·Π½Π°Ρ‡ΠΈΡ‚ΡŒ svg Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ Π·Π½Π°Ρ‡ΠΊΠ°. Π˜ΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ svg Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡƒΡ‚ΡŒ Π±Π΅Π· ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ <code> <svg> </code>. Для ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° Π±ΠΎΠ»Π΅Π΅ слоТного SVG ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π·Π½Π°Ρ‡ΠΎΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°.</p><pre> <code> ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vue ΠΈΠ· 'vue' ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vuetify ΠΈΠ· vuetify / lib ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ myIconSvg ΠΈΠ· myIcon.svg Vue.ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ (Vuetify) ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ Vuetify ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ({ icons: { iconfont: 'fa', цСнности: { customIconSvg: myIconSvg, customIconSvgPath: 'M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c -0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277 , 9.784,14.989,9.491z ', }, }, }) </code> </pre><p> Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Π·Π½Π°Ρ‡ΠΊΠΎΠ², Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π½Π΅Ρ‚ прСдустановки, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ.</p><pre> <code> ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vue ΠΈΠ· 'vue' ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vuetify ΠΈΠ· vuetify / lib const MY_ICONS = { ΠΏΠΎΠ»Π½Ρ‹ΠΉ: '...', ΠžΡ‚ΠΌΠ΅Π½Π°: '...', Π±Π»ΠΈΠ·ΠΊΠΎ: '...', ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ: '...', Чисто: '...', успСх: '...', Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ: '...', ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅: '...', ошибка: '...', прСдыдущая: '...', ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ: '...', checkboxOn: '...', checkboxOff: '...', checkboxIndeterminate: '...', Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒ: '...', Π‘ΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ: '...', Ρ€Π°ΡΡˆΠΈΡ€ΡΡ‚ΡŒ: '...', мСню: '...', ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΏΠΏΠ°: '...', ΠΏΠ°Π΄Π°Ρ‚ΡŒ: '...', radioOn: '...', radioOff: '...', Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ: '... ', ratingEmpty: '...', ratingFull: '...', ratingHalf: '...', Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°: '...', ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ: '...', послСдний: '...', Ρ€Π°Π·Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ: '...', Ρ„Π°ΠΉΠ»: '...', } Vue.use (Vuetify) ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ Vuetify ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ({ icons: { значСния: MY_ICONS, }, }) </code> </pre><h3><span class="ez-toc-section" id="_%D0%9F%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D1%81%D0%BA%D0%B8%D0%B5_%D0%B7%D0%BD%D0%B0%D1%87%D0%BA%D0%B8_%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE%D0%BA%D1%80%D0%B0%D1%82%D0%BD%D0%BE%D0%B3%D0%BE_%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F"></span> # ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎΠ³ΠΎ использования <span class="ez-toc-section-end"></span></h3><p> Vuetify автоматичСски ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ Π»ΡŽΠ±Ρ‹Π΅ строки Π·Π½Π°Ρ‡ΠΊΠΎΠ², прСдоставлСнныС Π² ΠΏΡƒΠ» доступных прСсСтов. Π­Ρ‚ΠΎ позволяСт Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ настраиваСмыС строки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² вашСм ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, просто ΡΡΡ‹Π»Π°ΡΡΡŒ Π½Π° Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ <strong> </strong>.</p><pre> <code> ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vue ΠΈΠ· 'vue' ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vuetify ΠΈΠ· vuetify / lib Vue.use (Vuetify) ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ Vuetify ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ({ icons: { iconfont: 'mdi', цСнности: { ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚: 'mdi-dropbox', ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°: 'mdi-lifebuoy', steam: 'mdi-steam-box', ПК: 'mdi-desktop-classic', xbox: 'mdi-xbox', playstation: 'mdi-playstation', ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ: 'mdi-nintendo-switch', }, }, }) </code> </pre><p> Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ вашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ всСгда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ с Π·Π°Π΄Π°Π½Π½ΠΎΠΉ строкой.Π’ΠΎΡ‚ нСсколько способов использования <code> <v-icon> </code> с этой систСмой.</p><pre> <code> <шаблон> <div> <v-icon> $ vuetify.icons.product </v-icon> <v-icon> $ product </v-icon> <v-icon v-text = "'$ vuetify.icons.support'"> </v-icon> <v-icon v-text = "'$ support'"> </v-icon> <v-icon v-html = "'$ vuetify.icons.steam'"> </v-icon> <v-icon v-html = "'$ steam'"> </v-icon> <v-icon v-text = "platform"> </v-icon> </div> </template> <сцСнарий> экспорт ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ { Π΄Π°Π½Π½Ρ‹Π΅: () => ({ ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ: { имя: 'Π”ΠΆΠΎΠ½ Π›Π΅ΠΉΠ΄Π΅Ρ€', ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ°: 'pc', }, }), вычислСно: { ΠŸΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° () { Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ '$' + это.user.platform } } } </script> </code> </pre><h3><span class="ez-toc-section" id="_%D0%97%D0%BD%D0%B0%D1%87%D0%BA%D0%B8_%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D0%BE%D0%B2"></span> # Π—Π½Π°Ρ‡ΠΊΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² <span class="ez-toc-section-end"></span></h3><p> ВмСсто прСдоставлСнных прСдустановок ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ собствСнныС Π·Π½Π°Ρ‡ΠΊΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ². Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ Vuetify, Π½Π° свои собствСнныС.</p><pre> <code> ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vue ΠΈΠ· 'vue' ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vuetify ΠΈΠ· vuetify / lib ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ IconComponent ΠΈΠ· './IconComponent.vue' Vue.use (Vuetify) ΡΠΊΡΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ Vuetify ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ({ icons: { цСнности: { ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚: { ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚: IconComponent, props: { имя: 'ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚', }, }, }, }, }) </code> </pre><p> Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваш Π·Π½Π°Ρ‡ΠΎΠΊ SVG ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ наслСдовал Ρ†Π²Π΅Ρ‚Π° ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±, ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΊ Π½Π΅ΠΌΡƒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ CSS:</p><pre> <code>.ваш-svg-icon fill: currentColor </code> </pre><h3><span class="ez-toc-section" id="_%D0%9E%D1%82%D1%81%D1%83%D1%82%D1%81%D1%82%D0%B2%D1%83%D1%8E%D1%82_%D0%B7%D0%BD%D0%B0%D1%87%D0%BA%D0%B8_%D0%BC%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D0%B0%D0%BB%D0%BE%D0%B2"></span> # ΠžΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² <span class="ez-toc-section-end"></span></h3><p> НСкоторыС Π·Π½Π°Ρ‡ΠΊΠΈ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ² ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‚. НапримСр, <code> Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ </code> ΠΈ <code> person_outline </code> доступны, Π½ΠΎ <code> visibility_outline </code> - Π½Π΅Ρ‚, Π° <code> Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ </code> - Π΅ΡΡ‚ΡŒ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ², Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡˆΡ€ΠΈΡ„Ρ‚ Π½ΠΈΠΆΠ΅ (ΡƒΠ΄Π°Π»ΠΈΡ‚Π΅ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°, Ссли ΠΎΠ½ ΡƒΠΆΠ΅ зарСгистрирован).</p><pre> <code> <ссылка rel = "Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй" href = "https: //fonts.googleapis.com / css? family = ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» + Иконки | ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» + Иконки + ΠšΠΎΠ½Ρ‚ΡƒΡ€ | ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» + Иконки + Π”Π²Π° + Π’ΠΎΠ½ | ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» + Иконки + ΠšΡ€ΡƒΠ³Π»Ρ‹ΠΉ | ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» + Иконки + Sharp Β» /> </code> </pre><p> Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свой собствСнный ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚. Допустим, это <strong> @ / components / MaterialIcon.vue </strong>.</p><pre> <code> <шаблон> <i: class = "standardClass"> {{parsed.id}} </i> </template> <сцСнарий> экспорт ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ { props: { имя: { Ρ‚ΠΈΠΏ: String } }, вычислСно: { parsed () { const check = (customSuffixes, standardSuffix) => { for (ΠΏΡƒΡΡ‚ΡŒ суффикс customSuffixes) { суффикс = `_ $ {суффикс}` Ссли это.name.endsWith (суффикс)) { Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ { суффикс: стандартный id: this.name.substring (0, this.name.indexOf (суффикс)) } } } Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ лоТь } Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ ( check (['Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ', 'Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ'], '') || check (['ΠΊΠΎΠ½Ρ‚ΡƒΡ€', 'ΠΊΠΎΠ½Ρ‚ΡƒΡ€'], 'ΠΊΠΎΠ½Ρ‚ΡƒΡ€') || check (['Π΄Π²ΡƒΡ…Ρ†Π²Π΅Ρ‚Π½Ρ‹ΠΉ', 'Π΄Π²ΡƒΡ…Ρ†Π²Π΅Ρ‚Π½Ρ‹ΠΉ'], 'Π΄Π²ΡƒΡ…Ρ†Π²Π΅Ρ‚Π½Ρ‹ΠΉ') || check (['ΠΊΡ€ΡƒΠ³Π»Ρ‹ΠΉ', 'ΠΎΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹ΠΉ'], 'ΠΊΡ€ΡƒΠ³Π»Ρ‹ΠΉ') || check (['Sharpened'], 'Sharpened') || { суффикс: '', id: это.имя } ) }, standardClass () { if (this.parsed.suffix) { return `material-icons - $ {this.parsed.suffix}` } Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ 'material-icons' } } } </script> </code> </pre><p> Π—Π°Ρ‚Π΅ΠΌ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΡ‡Π½Ρ‹Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅.</p><pre> <code> ΠΈΠΌΠΏΠΎΡ€Ρ‚ Vue ΠΈΠ· vue ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Vuetify ΠΈΠ· vuetify / lib ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ MaterialIcon ΠΈΠ· '@ / components / MaterialIcon' function missingMaterialIcons (ids) { const icons = {} for (const id ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠ²) { for (константный суффикс ['Π·Π°Π»ΠΈΠ²ΠΊΠ°', 'ΠΊΠΎΠ½Ρ‚ΡƒΡ€', 'Π΄Π²ΡƒΡ…Ρ†Π²Π΅Ρ‚Π½Ρ‹ΠΉ', 'ΠΊΡ€ΡƒΠ³Π»Ρ‹ΠΉ', 'Ρ€Π΅Π·ΠΊΠΈΠΉ']) { const name = `$ {id} _ $ {суффикс}` Π·Π½Π°Ρ‡ΠΊΠΈ [имя] = { ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚: MaterialIcon, props: { имя } } } } Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΊΠΈ } Vue.ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ (Vuetify, { icons: { цСнности: { ... missingMaterialIcons (['Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ', 'Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ_Π²Ρ‹ΠΊΠ»']) } } }) </code> </pre><p> НаконСц, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ².</p><pre> <code> <v-тСкстовоС ΠΏΠΎΠ»Π΅ label = "ΠΏΠ°Ρ€ΠΎΠ»ΡŒ" : append-icon = " pwShow ? "$ visibility_outline" : '$ visibility_off_outline' " @click: append = "pwShow =! pwShow" : type = "pwShow? 'text': 'password'" /> <v-icon> $ visibility_outline </v-icon> </code> </pre><h3><span class="ez-toc-section" id="%D0%93%D0%BE%D1%82%D0%BE%D0%B2%D1%8B_%D0%BA_%D0%B1%D0%BE%D0%BB%D1%8C%D1%88%D0%B5%D0%BC%D1%83"></span> Π“ΠΎΡ‚ΠΎΠ²Ρ‹ ΠΊ Π±ΠΎΠ»ΡŒΡˆΠ΅ΠΌΡƒ? <span class="ez-toc-section-end"></span></h3><p> ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡ‚Π΅ ΠΎΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅, просматривая связанный ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ Командой, ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΠΉΡ‚Π΅ΡΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ страницами с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… ссылок Π½ΠΈΠΆΠ΅.</p><hr role="separator" aria-orientation="horizontal"/> Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ эту страницу Π½Π° GitHub</p><p> ПослСднСС ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅: 29.11.2021, 5:14:51</p><h2><span class="ez-toc-section" id="%D0%A8%D1%80%D0%B8%D1%84%D1%82_Segoe_Fluent_Icons_-_%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F_%D0%B4%D0%BB%D1%8F_Windows"></span> Π¨Ρ€ΠΈΡ„Ρ‚ Segoe Fluent Icons - прилоТСния для Windows <span class="ez-toc-section-end"></span></h2><ul data-bi-name="page info" lang="en-us" dir="ltr"><li> <time data-article-date="" aria-label="Article review date" datetime="2021-10-04T20:55:00Z" data-article-date-source="git"> 04.10.2021 </time></li><li> 17 ΠΌΠΈΠ½ΡƒΡ‚ для чтСния</li><li></li></ul><p>Π­Ρ‚Π° страница ΠΏΠΎΠ»Π΅Π·Π½Π°?</p><h4><span class="ez-toc-section" id="%D0%9E%D1%86%D0%B5%D0%BD%D0%B8%D1%82%D0%B5_%D1%81%D0%B2%D0%BE%D0%B9_%D0%BE%D0%BF%D1%8B%D1%82"></span> ΠžΡ†Π΅Π½ΠΈΡ‚Π΅ свой ΠΎΠΏΡ‹Ρ‚ <span class="ez-toc-section-end"></span></h4><p>Π΄Π°</p><p>НСт</p><p>Π›ΡŽΠ±ΠΎΠΉ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΡ‚Π·Ρ‹Π²?</p><p> ΠžΡ‚Π·Ρ‹Π² Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΏΡ€Π°Π²Π»Π΅Π½ Π² Microsoft: ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΒ» ваш ΠΎΡ‚Π·Ρ‹Π² Π±ΡƒΠ΄Π΅Ρ‚ использован для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² ΠΈ услуг Microsoft.ΠŸΠΎΠ»ΠΈΡ‚ΠΈΠΊΠ° ΠΊΠΎΠ½Ρ„ΠΈΠ΄Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ.</p><p> ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π½Π° рассмотрСниС</p><p data-binary-rating-onsubmit-message="main-page-rating-container" tabindex="-1" hidden=""> Бпасибо.</p><h4><span class="ez-toc-section" id="%D0%92_%D1%8D%D1%82%D0%BE%D0%B9_%D1%81%D1%82%D0%B0%D1%82%D1%8C%D0%B5"></span> Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ <span class="ez-toc-section-end"></span></h4><p> Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ прСдставлСны Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² ΠΏΠΎ использованию ΡˆΡ€ΠΈΡ„Ρ‚Π° Segoe Fluent Icons ΠΈ пСрСчислСны всС Π·Π½Π°Ρ‡ΠΊΠΈ вмСстС с ΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Unicode ΠΈ ΠΎΠΏΠΈΡΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ.</p><p> <strong> Π’Π°ΠΆΠ½Ρ‹Π΅ API </strong>:</p><h3><span class="ez-toc-section" id="%D0%A1%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D1%8F_%D0%BE_Segoe_Fluent_Icons"></span> БвСдСния ΠΎ Segoe Fluent Icons <span class="ez-toc-section-end"></span></h3><p> Подсказка</p><p> Π‘ выпуском Windows 11 ΡˆΡ€ΠΈΡ„Ρ‚ Segoe Fluent Icons Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ Segoe MDL2 Assets Π² качСствС Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π° для Π·Π½Π°Ρ‡ΠΊΠΎΠ² символов.<strong> Segoe MDL2 Assets </strong> ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π±ΡƒΠ΄Π΅Ρ‚ доступСн, Π½ΠΎ ΠΌΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ вашС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ <strong> Segoe Fluent Icons </strong>.</p><p> Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π·Π½Π°Ρ‡ΠΊΠΎΠ², Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹Ρ… Π² ΡˆΡ€ΠΈΡ„Ρ‚ <strong> Segoe Fluent Icons </strong>, привязаны ΠΊ области частного использования Unicode (PUA). Π”ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ PUA - это нСстандартный Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ Unicode, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ свои собствСнныС символы. Π­Ρ‚ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΏΡ€ΠΈ создании символьного ΡˆΡ€ΠΈΡ„Ρ‚Π°, Π½ΠΎ создаСт ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ совмСстимости, ΠΊΠΎΠ³Π΄Π° <strong> Segoe Fluent Icons </strong> нСдоступСн.</p><p> Π—Π½Π°Ρ‡ΠΊΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Π° <strong> Segoe Fluent Icons </strong> Π½Π΅ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для использования Π² тСкстС. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ старыС Β«ΡƒΠ»ΠΎΠ²ΠΊΠΈΒ», Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ стрСлки прогрСссивного раскрытия ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, большС Π½Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ. Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ всС Π½ΠΎΠ²Ρ‹Π΅ Π·Π½Π°Ρ‡ΠΊΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ располоТСниС, ΠΈΡ… Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ с Π½ΡƒΠ»Π΅Π²ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ; ΠΌΡ‹ ΡƒΠ±Π΅Π΄ΠΈΠ»ΠΈΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΠΊΠ°ΠΊ Π½Π°Π±ΠΎΡ€.</p><h3><span class="ez-toc-section" id="%D0%9D%D0%B0%D1%81%D0%BB%D0%BE%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B8_%D0%B7%D0%B5%D1%80%D0%BA%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D0%BE%D1%82%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5"></span> НаслоСниС ΠΈ Π·Π΅Ρ€ΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ <span class="ez-toc-section-end"></span></h3><p> ВсС Π³Π»ΠΈΡ„Ρ‹ Π² <strong> Segoe Fluent Icons </strong> ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡƒΡŽ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ высотой ΠΈ Π»Π΅Π²ΠΎΠΉ исходной Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ, поэтому эффСкты наслоСния ΠΈ Ρ€Π°ΡΠΊΡ€Π°ΡˆΠΈΠ²Π°Π½ΠΈΡ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ достигнуты ΠΏΡƒΡ‚Π΅ΠΌ рисования Π³Π»ΠΈΡ„ΠΎΠ² нСпосрСдствСнно Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π΅.Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚ΡƒΡ€, нарисованный ΠΏΠΎΠ²Π΅Ρ€Ρ… красного сСрдца Π½ΡƒΠ»Π΅Π²ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹.</p></p><pre> <code> <Π‘Π΅Ρ‚ΠΊΠ°> <FontIcon FontFamily = "Иконки Segoe Fluent" Glyph = "& # xEB51;" Foreground = "# C72335" /> <FontIcon FontFamily = "Иконки Segoe Fluent" Glyph = "& # xEB52;" /> </Grid> </code> </pre><p> МногиС Π·Π½Π°Ρ‡ΠΊΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‚ Π·Π΅Ρ€ΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΠΎΡ€ΠΌΡ‹, доступныС для использования Π½Π° языках, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΡ… Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½Π½ΠΎΡΡ‚ΡŒ тСкста справа Π½Π°Π»Π΅Π²ΠΎ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ арабский, фарси ΠΈ ΠΈΠ²Ρ€ΠΈΡ‚.</p><h3><span class="ez-toc-section" id="%D0%98%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B8%D0%BA%D0%BE%D0%BD%D0%BE%D0%BA"></span> ИспользованиС ΠΈΠΊΠΎΠ½ΠΎΠΊ <span class="ez-toc-section-end"></span></h3><p> Если Π²Ρ‹ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚Π΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° C # / VB / C ++ ΠΈ XAML, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ Π³Π»ΠΈΡ„Ρ‹ ΠΈΠ· Segoe Fluent Icons с пСрСчислСниСм символов.</p><pre> <code> <SymbolIcon Symbol = "GlobalNavigationButton" /> </code> </pre><p> Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³Π»ΠΈΡ„ ΠΈΠ· ΡˆΡ€ΠΈΡ„Ρ‚Π° <em> Segoe Fluent Icons </em> *, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ Π² пСрСчислСниС Symbol, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ <strong> FontIcon </strong>.</p><pre> <code> <FontIcon FontFamily = "Segoe Fluent Icons" Glyph = "& # xE700;" /> </code> </pre><p> Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ статичСский рСсурс <code> SymbolThemeFontFamily </code> для доступа ΠΊ <strong> Segoe Fluent Icons </strong> вмСсто указания ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΏΠΎ ΠΈΠΌΠ΅Π½ΠΈ:</p><pre> <code> <FontIcon FontFamily = "{StaticResource SymbolThemeFontFamily}" Glyph = "& # xE700;" /> </code> </pre><h3><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BA_%D0%BC%D0%BD%D0%B5_%D0%BF%D0%BE%D0%BB%D1%83%D1%87%D0%B8%D1%82%D1%8C_%D1%8D%D1%82%D0%BE%D1%82_%D1%88%D1%80%D0%B8%D1%84%D1%82"></span> Как ΠΌΠ½Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ этот ΡˆΡ€ΠΈΡ„Ρ‚? <span class="ez-toc-section-end"></span></h3><ul><li> Π’ Windows 11: Π’Π°ΠΌ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ, ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈΠ΄Π΅Ρ‚ Π² ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡ‚Π΅ с Windows.</li><li> Π’ Windows 10: <strong> Segoe Fluent Icons </strong> ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π½Π΅ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ Π² Windows 10. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΅Π³ΠΎ здСсь.</li><li> На Mac ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΌ устройствС: здСсь Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ <strong> Segoe Fluent Icons </strong> ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ для использования Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅, Π½ΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡƒ.</li></ul><h3><span class="ez-toc-section" id="%D0%A1%D0%BF%D0%B8%D1%81%D0%BE%D0%BA_%D0%B7%D0%BD%D0%B0%D1%87%D0%BA%D0%BE%D0%B2"></span> Бписок Π·Π½Π°Ρ‡ΠΊΠΎΠ² <span class="ez-toc-section-end"></span></h3><p> Π˜ΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚ <strong> Segoe Fluent Icons </strong> Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ большС Π·Π½Π°Ρ‡ΠΊΠΎΠ², Ρ‡Π΅ΠΌ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ здСсь ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ.МногиС Π·Π½Π°Ρ‡ΠΊΠΈ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… Ρ†Π΅Π»Π΅ΠΉ ΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ большС Π½ΠΈΠ³Π΄Π΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ.</p><p> ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅</p><p> Π“Π»ΠΈΡ„Ρ‹ с прСфиксами ΠΎΡ‚ <strong> E0-</strong> Π΄ΠΎ <strong> E5-</strong> (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, E001, E5B1) Π² настоящСС врСмя ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ ΠΊΠ°ΠΊ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠ΅ ΠΈ поэтому Π½Π΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽΡ‚ΡΡ.</p><p> Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Ρ‚Π°Π±Π»ΠΈΡ†Π°Ρ… ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ всС Π³Π»ΠΈΡ„Ρ‹ <strong> Segoe Fluent Icons </strong> ΠΈ ΠΈΡ… ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ значСния Π² ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΠ΅ Unicode ΠΈ ΠΎΠΏΠΈΡΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΈΠΌΠ΅Π½Π°. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ списка, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π³Π»ΠΈΡ„Ρ‹ Π² соотвСтствии с Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ PUA, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΎΠ½ΠΈ ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠ°Ρ‚.</p><h4><span class="ez-toc-section" id="PUA_E700-E900"></span> PUA E700-E900 <span class="ez-toc-section-end"></span></h4><p> Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π³Π»ΠΈΡ„ΠΎΠ² ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Ρ‚ΠΎΡ‡ΠΊΠΈ Unicode с прСфиксом ΠΎΡ‚ E7- Π΄ΠΎ E9-.</p><p> К Π½Π°Ρ‡Π°Π»Ρƒ</p><h4><span class="ez-toc-section" id="PUA_EA00-EC00"></span> PUA EA00-EC00 <span class="ez-toc-section-end"></span></h4><p> Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π³Π»ΠΈΡ„ΠΎΠ² ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Ρ‚ΠΎΡ‡ΠΊΠΈ Unicode с прСфиксом ΠΎΡ‚ EA- Π΄ΠΎ EC-.</p><p> К Π½Π°Ρ‡Π°Π»Ρƒ</p><h4><span class="ez-toc-section" id="PUA_ED00-EF00"></span> PUA ED00-EF00 <span class="ez-toc-section-end"></span></h4><p> Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π³Π»ΠΈΡ„ΠΎΠ² ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Ρ‚ΠΎΡ‡ΠΊΠΈ Unicode с прСфиксом ΠΎΡ‚ ED- Π΄ΠΎ EF-.</p><p> К Π½Π°Ρ‡Π°Π»Ρƒ</p><h4><span class="ez-toc-section" id="PUA_F000-F200"></span> PUA F000-F200 <span class="ez-toc-section-end"></span></h4><p> Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π³Π»ΠΈΡ„ΠΎΠ² ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Ρ‚ΠΎΡ‡ΠΊΠΈ Unicode с прСфиксом ΠΎΡ‚ F0- Π΄ΠΎ F2-.</p><p> К Π½Π°Ρ‡Π°Π»Ρƒ</p><h4><span class="ez-toc-section" id="PUA_F300-F500"></span> PUA F300-F500 <span class="ez-toc-section-end"></span></h4><p> Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π³Π»ΠΈΡ„ΠΎΠ² ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Ρ‚ΠΎΡ‡ΠΊΠΈ Unicode с прСфиксом ΠΎΡ‚ F3- Π΄ΠΎ F5-.</p><p> К Π½Π°Ρ‡Π°Π»Ρƒ</p><h4><span class="ez-toc-section" id="PUA_F600-F800"></span> PUA F600-F800 <span class="ez-toc-section-end"></span></h4><p> Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ Π³Π»ΠΈΡ„ΠΎΠ² ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Ρ‚ΠΎΡ‡ΠΊΠΈ Unicode с прСфиксом ΠΎΡ‚ F6- Π΄ΠΎ F8-.</p><p> К Π½Π°Ρ‡Π°Π»Ρƒ</p><p> .</p><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/shriftovye-ikonki-font-awesome-ikonochnyj-shrift-i-css-instrumentarij.html#respond" style="display:none;">ΠžΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚</a></small></h3><form action="https://jumper.su/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½.</span> <span class="required-field-message">ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p><p class="comment-form-url"><label for="url">Π‘Π°ΠΉΡ‚</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ" /> <input type='hidden' name='comment_post_ID' value='15393' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация ΠΏΠΎ записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://jumper.su/raznoe/oformlenie-ssylok-html-krasivoe-oformlenie-ssylok.html" rel="prev"><span class="screen-reader-text">Previous Post</span><span class="nav-title">ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ссылок html: ΠšΡ€Π°ΡΠΈΠ²ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ссылок</span></a></div><div class="nav-next"><a href="https://jumper.su/raznoe/zashhishhennye-programmy-dlya-obshheniya-5-prilozhenij-dlya-bezopasnogo-obshheniya-v-seti-na-mobilnyh-ustrojstvah.html" rel="next"><span class="screen-reader-text">Next Post</span><span class="nav-title">Π—Π°Ρ‰ΠΈΡ‰Π΅Π½Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ для общСния: 5 ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ для бСзопасного общСния Π² сСти Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах</span></a></div></div></nav></article></div></div><div class="col-md-4 col-lg-4"><aside id="secondary" class="widget-area"><section id="categories-2" class="widget widget_categories"><h2 class="widget-title">Π ΡƒΠ±Ρ€ΠΈΠΊΠΈ</h2><ul><li class="cat-item cat-item-6"><a href="https://jumper.su/category/wordpress">Wordpress</a></li><li class="cat-item cat-item-1"><a href="https://jumper.su/category/bez-rubriki">Π‘Π΅Π· Ρ€ΡƒΠ±Ρ€ΠΈΠΊΠΈ</a></li><li class="cat-item cat-item-7"><a href="https://jumper.su/category/verstka">ВСрстка</a></li><li class="cat-item cat-item-5"><a href="https://jumper.su/category/dizajn">Π”ΠΈΠ·Π°ΠΉΠ½</a></li><li class="cat-item cat-item-4"><a href="https://jumper.su/category/dlya-nachinayushhih">Для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…</a></li><li class="cat-item cat-item-10"><a href="https://jumper.su/category/obuchenie">ΠžΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅</a></li><li class="cat-item cat-item-9"><a href="https://jumper.su/category/primery">ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹</a></li><li class="cat-item cat-item-3"><a href="https://jumper.su/category/raznoe">Π Π°Π·Π½ΠΎΠ΅</a></li><li class="cat-item cat-item-8"><a href="https://jumper.su/category/shablon">Π¨Π°Π±Π»ΠΎΠ½</a></li></ul></section></aside></div></div></main></div><section itemtype='https://schema.org/WPFooter' itemscope='itemscope' role='contentinfo' class="fansee-business-footer-wrapper"><div class="container-fluid px-md-5"><footer class="fansee-business-footer-wrapper-inner footer-widget"><div class="footer-widget-wrapper"></div><div class="footer-widget-wrapper"></div><div class="footer-widget-wrapper"></div><div class="footer-widget-wrapper"></div></footer></div><div class="fansee-business-copyright"><div class="container-fluid"><div class="fansee-business-copyright-inner"><div class="fansee-business-copy-right"><div class="pr-0"> 2024 Β© ВсС ΠΏΡ€Π°Π²Π° Π·Π°Ρ‰ΠΈΡ‰Π΅Π½Ρ‹.</div></div><div class="fansee-business-social-menu"><ul class="fansee-business-demo-social-menu"><li><a href="#" target="_blank"></a></li><li><a href="#" target="_blank"></a></li><li><a href="#" target="_blank"></a></li><li><a href="#" target="_blank"></a></li></ul></div></div></div></div></section><div class="fansee-business-stt scroll-to-top"> <i class="fa fa-arrow-up"></i></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://jumper.su/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --> <script defer src="https://jumper.su/wp-content/cache/autoptimize/js/autoptimize_c2eddd3bb4f6b370580402e88c0d0641.js"></script></body></html><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>