Π¨ΡΠΈΡΡΠΎΠ²ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ: 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:
- ΠΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ IcoMoon App, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ΅ΡΠ²ΠΈΡΠ° ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ URL Π°Π΄ΡΠ΅Ρ: https://icomoon.io/app/.
- ΠΠ²Π΅ΡΡΠΈ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ° (Π·Π½Π°ΡΠΎΠΊ «Manage Projects»).
- ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΏΡΠΎΠ΅ΠΊΡ ΠΏΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΡΡΠΈΡΡ Font Awesome (ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΡΡΠ΅ΠΌΡ ΠΏΠΎΠ»ΠΎΡΠΎΡΠΊΠ°ΠΌΠΈ -> Icon Library).
- ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² ΠΏΡΠΎΠ΅ΠΊΡ ΠΏΡΡΡΠΎΠΉ Π½Π°Π±ΠΎΡ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½ΠΈΡ Π² Π½Π΅Π³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΡ (ΡΠ²ΠΎΠΈΡ ) ΠΈΠΊΠΎΠ½ΠΎΠΊ (ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ 3 Π»ΠΈΠ½ΠΈΡΠΌΠΈ -> New Empty Set).
- ΠΠ°Π΄Π°ΡΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎ ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠΌΡ Π½Π°Π±ΠΎΡΡ (ΠΊΠ½ΠΎΠΏΠΊΠ° Ρ ΡΡΠ΅ΠΌΡ ΠΏΠΎΠ»ΠΎΡΠΎΡΠΊΠ°ΠΌΠΈ -> View / Edit Info).
- ΠΠΎΠ±Π°Π²ΠΈΡΡ Π² Π½Π°Π±ΠΎΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ (ΡΠ²ΠΎΠΈ) Π·Π½Π°ΡΠΊΠΈ (ΠΊΠ½ΠΎΠΏΠΊΠ° «3 Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠ΅ Π»ΠΈΠ½ΠΈΠΈ» -> Import to Set).
- ΠΡΠ±ΡΠ°ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² ΡΠ΅Π·ΡΠ»ΡΡΠΈΡΡΡΡΠΈΠΉ Π½Π°Π±ΠΎΡ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ° «Select».
- ΠΡΠΏΠΎΠ»Π½ΠΈΡΡ Π³Π΅Π½Π΅ΡΠ°ΡΠΈΡ ΡΡΠΈΡΡΠ° (Π½Π°ΠΆΠ°ΡΡ Π²Π½ΠΈΠ·Ρ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° ΡΠ»Π΅ΠΌΠ΅Π½Ρ «Generate Font»).
- ΠΠ°ΠΆΠ°ΡΡ Π½Π° Π·Π½Π°ΡΠΎΠΊ ΡΠ΅ΡΡΠ΅ΡΡΠ½ΠΊΠΈ ΠΈ Π² ΠΎΡΠΊΡΡΠ²ΡΠ΅ΠΌΡΡ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ Π²Π²Π΅ΡΡΠΈ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΡΠΈΡΡΠ° (Font Name), ΠΏΡΠ΅ΡΠΈΠΊΡ ΠΊΠ»Π°ΡΡΠ° (Class Prefix), Π²ΡΠ±ΡΠ°ΡΡ ΠΎΠΏΡΠΈΡ «Use a class» (ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡ) ΠΈ ΡΠΊΠ°Π·Π°ΡΡ Π² ΠΏΠΎΠ»Π΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ «.icon».
- ΠΠ°ΠΆΠ°ΡΡ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡ «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:
- ΠΠ°Π³ΡΡΠ·ΠΈΡΠ΅ ΡΠ΅ΠΌΡ Kendo UI Π² ΡΠ²ΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡ.
ΠΡΠΈΡΠ²ΠΎΠΉΡΠ΅ ΡΠ΅Π³Ρ 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. ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎ Π½Π΅ ΡΠ΅ΡΠ°Π΅Ρ Π²ΡΠ΅Ρ Π΄ΡΡΠ³ΠΈΡ ΠΏΡΠΎΠ±Π»Π΅ΠΌ, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΡ Π² ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅, ΠΈ Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ.
ΠΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ
ΠΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ, ΠΊΠ°ΠΊ ΠΈΠ·Π²Π΅ΡΡΠ½ΠΎ, ΠΏΠ»ΠΎΡ ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΡΡ Π΄Π»Ρ Π΄ΠΎΡΡΡΠΏΠ° ΠΈ ΠΌΠΎΠ³ΡΡ Π²ΡΠ·Π²Π°ΡΡ ΡΠ°Π·ΠΎΡΠ°ΡΠΎΠ²Π°Π½ΠΈΠ΅ Ρ ΡΠ΅Ρ , ΠΊΡΠΎ ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ Π½Π° Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.
ΠΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΡΡΡ ΠΊΠ°ΠΊ ΡΠ΅ΠΊΡΡ — ΠΡΠ°ΡΠ·Π΅Ρ ΠΎΠ±ΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΡΡΠΈΡΡΡ ΠΊΠ°ΠΊ ΡΠ΅ΠΊΡΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊ ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΡΠΈΡΡΡ. Π‘ Π³ΠΎΠ΄Π°ΠΌΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° ΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈΡΡ Π²ΡΠ΅ ΡΠΌΠ½Π΅Π΅, Π½ΠΎ ΠΈΠΌ Π²ΡΠ΅ Π΅ΡΠ΅ ΡΡΡΠ΄Π½ΠΎ ΡΠ°Π·Π»ΠΈΡΠ°ΡΡ, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΠ°Π·Π±ΠΎΡΡΠΈΠ²ΡΠΉ ΡΠ΅ΠΊΡΡ, Π° ΡΡΠΎ — ΠΏΠΈΠΊΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°. ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌ ΡΡΠ΅Π½ΠΈΡ Ρ ΡΠΊΡΠ°Π½Π° Π±ΡΠ΄ΡΡ ΡΠΈΡΠ°ΡΡ Π²ΡΠ»ΡΡ ΡΠ΅ΠΊΡΡ, Π²ΡΡΠ°Π²Π»Π΅Π½Π½ΡΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS, ΠΏΠΎΡΡΠΎΠΌΡ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ ΡΡΠ°Π»ΠΊΠΈΠ²Π°ΡΡΡΡ Ρ Π²Π°ΡΠΈΠΌΠΈ Π·Π½Π°ΡΠΊΠ°ΠΌΠΈ, ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡΡ ΡΠΊΠ°Π·Π°ΡΡ Β«Π½Π΅ΠΏΡΠΎΠΈΠ·Π½ΠΎΡΠΈΠΌΠΎΒ» ΠΈΠ»ΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΡΠΎΠΏΡΡΠ΅Π½Ρ.
Π’Π°Π±Π»ΠΈΡΠ° ΡΡΠΈΠ»Π΅ΠΉ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ — ΠΡΠ΄ΠΈ Ρ Π½Π°ΡΡΡΠ΅Π½ΠΈΡΠΌΠΈ Π·ΡΠ΅Π½ΠΈΡ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΡΠΈΠ»Π΅ΠΉ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΠΏΠΎΡΠ΅ΡΠ°Π΅ΠΌΡΡ ΠΈΠΌΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ², ΡΡΠΎΠ±Ρ ΡΠΏΡΠΎΡΡΠΈΡΡ ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅.ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ²Π΅ΡΠΎΠ²ΡΡ ΡΡ Π΅ΠΌ, ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΠΈΠ»ΠΈ Π²Π΅ΡΠ° ΡΡΠΈΡΡΠ° ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΡ ΡΡΠΈΡΡΠ°. ΠΡΠ»ΠΈ Π²Π°Ρ ΡΠ°ΠΉΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π·Π½Π°ΡΠΊΠΈ Π½Π΅ΠΊΠΎΠ½ΡΠ΅ΠΊΡΡΠ½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΊΡΠΎ-ΡΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΠΉ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΉ ΡΡΠΈΡΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, OpenDyslexic), Π·Π°ΡΡΠ°Π²ΠΈΡ Π²Π°ΡΠΈ Π·Π½Π°ΡΠΊΠΈ Π·Π°ΠΌΠ΅Π½ΠΈΡΡ ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΈΡΡΠ΅Π·Π½ΡΡΡ, ΡΡΠΎ ΠΏΠΎΡΠ΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎ ΡΠ΄Π΅Π»Π°Π΅Ρ Π²Π°Ρ Π²Π΅Π±-ΡΠ°ΠΉΡ Π½Π΅ΠΏΡΠΈΠ³ΠΎΠ΄Π½ΡΠΌ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΠΌΠ΅ΡΠ°Π΄Π°Π½Π½ΡΠ΅ — ΠΡΠΎΡΠ΅ΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΠΈΡΡΠ° Π·Π½Π°ΡΠΊΠ° Π² ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅ ΡΡΠ΅Π±ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²
:: 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 ΠΈΠΌΠ΅ΡΡ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ Π΄Π°ΡΡ ΠΈΠΌ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ ΠΏΠ΅ΡΠ΅Π΄ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠΈΡΡΠΎΠ² ΡΠΎ Π·Π½Π°ΡΠΊΠ°ΠΌΠΈ.
- ΠΡΠΎ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
- ΠΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΠΌΠ΅ΡΠ°Π΄Π°Π½Π½ΡΠ΅ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ. ΠΡΠΎΡΡΠΎ ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½Ρ
ΠΈΠ»ΠΈaria-labelledby
.
ΠΠ΅Π³ΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ
ΠΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΠΌ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΈΠ· 100 SVG ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ WOFF2 ΠΈΠ· 100 Π·Π½Π°ΡΠΊΠΎΠ²-Π³Π»ΠΈΡΠΎΠ² Π±ΡΠ΄Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅. ΠΠ΄Π½Π°ΠΊΠΎ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° SVG Π»Π΅Π³ΠΊΠΎ ΠΏΠ΅ΡΠ΅Π²Π΅ΡΠΈΠ²Π°ΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΡΡΠΈΡΡΠ° Π·Π½Π°ΡΠΊΠ°.
Π‘ SVG Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠΊΠΈ, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΠ΅ Π΄Π»Ρ ΡΡΠΎΠΉ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² ΡΠ²ΠΎΠΉ ΠΊΠΎΠ΄. Π‘Π°ΠΌΡΠΉ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ — ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ SVG
Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠΊΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ Π²Π°ΡΠΈΡ
Π·Π½Π°ΡΠΊΠΎΠ², Π° Π·Π°ΡΠ΅ΠΌ ΡΡΡΠ»Π°ΡΡΡΡ Π½Π° Π½ΠΈΡ
Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°
.ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΏΡΡΠΌΡΡ Π²ΡΡΡΠΎΠΈΡΡ ΡΠ²ΠΎΠΈ Π·Π½Π°ΡΠΊΠΈ SVG, ΠΎΠ΄Π½Π°ΠΊΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ Π·Π½Π°ΡΠΎΠΊ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ°Π· Π½Π° ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅, Π²Ρ ΠΏΡΠΎΡΡΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅ΡΠ΅ ΠΎΠ±ΡΠΈΠΉ Π²Π΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΠ·Π΄Π°Π΅ΡΠ΅ ΠΎΠ΄Π½ΠΎΡΡΡΠ°Π½ΠΈΡΠ½ΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ (SPA), ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ·ΡΡΠΈΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ ΡΠ°Π·Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΊΠΎΠ΄Π°, ΡΡΠΎΠ±Ρ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ².
ΠΡΠ΅ ΠΎΠ΄Π½ΠΎ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎ Π²Π°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ ΡΡΠΈΡΡ ΠΈ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΠ΅ Π΅Π³ΠΎ ΡΠ°ΠΉΠ»Ρ CSS Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Π°ΠΌΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΠ±ΡΡΠ½ΠΎΠΉ ΠΏΡΠ°ΠΊΡΠΈΠΊΠΎΠΉ Π΄Π»Ρ ΡΠ΅Ρ , ΠΊΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠΈΡΡΡ Π΄Π»Ρ Π·Π½Π°ΡΠΊΠΎΠ², ΡΠ²Π»ΡΠ΅ΡΡΡ Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ Π½ΡΠΆΠ½ΡΡ Π·Π½Π°ΡΠΊΠΎΠ² ΠΈ Π²ΠΎΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΡΠΈΡΡΠ°, Π²ΠΊΠ»ΡΡΠ°ΡΡΠ΅Π³ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΈ Π·Π½Π°ΡΠΊΠΈ.ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π·Π½Π°ΡΠΊΠΎΠ² SVG ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ Π² Π±Π°Π·Π΅ ΠΊΠΎΠ΄Π° Π±Π΅Π· Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅ΡΡΡΡΠΎΠ² ΡΡΠΈΡΡΠΎΠ² Π²ΠΎ Π²Π½Π΅ΡΠ½ΠΈΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ°Ρ .
Π§Π΅ΡΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
SVG — ΡΡΠΎ ΠΏΡΡΠΌΡΠ΅ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ΅ΡΠΎΠ΄Ρ ΡΠ³Π»Π°ΠΆΠΈΠ²Π°Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π²Π°ΡΠΈΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ ΠΈΠ»ΠΈ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΠΎΠΉ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ°, Π½Π΅ Π²Π»ΠΈΡΡΡ Π½Π° SVG, ΠΈ Π²Π°ΡΠΈ Π·Π½Π°ΡΠΊΠΈ Π±ΡΠ΄ΡΡ Π·Π°ΠΌΠ΅ΡΠ½ΠΎ ΡΠ΅ΡΡΠ΅.
ΠΠΎΠ»Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ CSS
Π‘ SVG Ρ Π²Π°Ρ Π΅ΡΡΡ Π΄ΠΎΡΡΡΠΏ ΠΊΠΎ Π²ΡΠ΅ΠΌ ΡΠ΅ΠΌ ΠΆΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ CSS, ΡΡΠΎ ΠΈ ΡΠΎ ΡΡΠΈΡΡΠΎΠΌ, ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠΌΡ Π΄ΡΡΠ³ΠΎΠΌΡ! ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΏΡΡΠΌΡΡ ΡΠΊΠ°Π·Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΠ°ΡΡΠΈ Π·Π½Π°ΡΠΊΠ°, ΡΠΎΡΡΠΎΡΡΠ΅Π³ΠΎ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΡΠ°ΡΡΠ΅ΠΉ, ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· Π½ΠΈΡ
ΡΠ²ΠΎΠΉ ΡΡΠΈΠ»Ρ.ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ CSS, ΡΠΏΠ΅ΡΠΈΡΠΈΡΠ½ΡΠ΅ Π΄Π»Ρ SVG, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ stroke
.
ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, SVG ΠΏΡΠΎΡΡΠΎ ΠΈΠΌΠ΅ΡΡ ΡΠ°Π·ΠΌΠ΅Ρ. ΠΠ° Π½ΠΈΡ Π½Π΅ Π²Π»ΠΈΡΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° CSS.
ΠΡΡΠ³ΠΈΠ΅ ΡΠΎΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ SVG Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅, ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π²Ρ ΡΠ»Π΅Π΄ΡΠ΅ΡΠ΅ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½Π΅Π½Π½ΡΠΌ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΡΠΌ:
- ΠΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΡΠΉΡΠ΅ ΡΠ²ΠΎΠΈ SVG — ΠΠ°ΠΏΡΡΡΠΈΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ SVG ΡΠ΅ΡΠ΅Π· ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΎΡ, ΡΡΠΎΠ±Ρ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ. (ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ, Π΅ΡΠ»ΠΈ Π½Π΅ Π²ΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π·Π½Π°ΡΠΊΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ ΠΏΠ°ΠΊΠ΅ΡΡ SVG, Π΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.)
- ΠΠΊΠ»ΡΡΠΈΡΡ ΡΠΆΠ°ΡΠΈΠ΅ — ΠΠ°ΡΡΡΠΎΠΉΡΠ΅ ΡΠ²ΠΎΠΉ ΡΠ΅ΡΠ²Π΅Ρ Π΄Π»Ρ ΠΎΡΠΏΡΠ°Π²ΠΊΠΈ Π²ΡΠ΅Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΠ΅ΡΡΡΡΠΎΠ² (HTML, JS, CSS) Ρ ΠΏΠΎΠΌΠΎΡΡΡ Brotli (ΠΈΠ»ΠΈ GZIP). ΠΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π΄Π°Π½Π½ΡΠ΅ SVG Π² Π²Π°ΡΠΈ ΡΠ°ΠΉΠ»Ρ HTML ΠΈ / ΠΈΠ»ΠΈ JS.
- ΠΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎ — Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΊΠ΅ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΠΈ Π·Π°Π³ΡΡΠΆΠ°Π»ΠΈ ΡΠ°ΠΉΠ»Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²Π°ΡΠΈ SVG-ΡΠ°ΠΉΠ»Ρ Π±ΡΠ΄ΡΡ ΡΠ°ΡΡΡΡ Π²Π°ΡΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ² HTML ΠΈ / ΠΈΠ»ΠΈ JS, Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΠΈ Π·Π°Π³ΡΡΠΆΠ°Π»ΠΈ ΠΈΡ ΡΠ½ΠΎΠ²Π°, ΡΠΎΠ»ΡΠΊΠΎ Π΅ΡΠ»ΠΈ ΠΎΠ½ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡΡ.
ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ ΡΠΎ Π·Π½Π°ΡΠΊΠ°ΠΌΠΈ SVG
ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π·Π½Π°ΡΠΊΠΎΠ² ΠΏΡΠ΅Π΄Π»Π°Π³Π°ΡΡ ΠΏΠ°ΠΊΠ΅ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ SVG.ΠΠ²Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π·Π½Π°ΡΠΊΠΎΠ², Material Design Icons ΠΈ Font Awesome, ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ ΠΏΠ°ΠΊΠ΅ΡΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ΅ΡΠ΅Π· npm
.
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π·Π½Π°ΡΠΊΠΎΠ² ΡΠ°ΠΊΠΆΠ΅ Π²ΡΠΏΡΡΡΠΈΠ»ΠΈ ΠΏΠ°ΠΊΠ΅ΡΡ Π΄Π»Ρ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ , ΡΠ°ΠΊ ΡΡΠΎ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π±ΡΡΡΡΠΎ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ React, ΠΈ Ρ Material Design, ΠΈ Ρ Font Awesome Π΅ΡΡΡ ΠΏΡΠΎΡΡΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ:
Material Design Icons — @ mdi / react & @ mdi / js
import Icon from '@ mdi / ΡΠ΅Π°Π³ΠΈΡΠΎΠ²Π°ΡΡ '; ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {mdiCoffee} ΠΈΠ· '@ mdi / js'; ΠΊΠΎΠ½ΡΡΠ°Π½ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ = <ΠΡΡΡ ΠΊ Π·Π½Π°ΡΠΊΡ = {mdiCoffee} size = {1} />;
Font Awesome — @ fortawesome / react-fontawesome & @ fortawesome / free-solid-svg-icons
ΠΈΠΌΠΏΠΎΡΡ {FontAwesomeIcon} ΠΈΠ· '@ fortawesome / react-fontawesome'; ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {faCoffee} ΠΈΠ· '@ fortawesome / free-solid-svg-icons'; const element =
;
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΠ±Π° ΡΡΠΈΡ ΡΠ΅ΡΠ΅Π½ΠΈΡ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π·Π½Π°ΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅, ΠΈΠ·-Π·Π° ΡΡΡΡΠΊΠΈ Π΄Π΅ΡΠ΅Π²Π°.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΈΡΡΠΎΠ² Π΄Π»Ρ ΠΈΠΊΠΎΠ½ΠΎΠΊ — ΡΡΠΎ Π²ΡΠ΅Π΄ Π΄Π»Ρ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Π΅ΠΉ ΠΈ Π²ΡΠ΅ΠΌΡ Π΄Π»Ρ Π²Π°Ρ. ΠΠ°ΠΌΠ΅Π½ΡΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΡΡ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΡΡΠΈΡΡΠ° Π·Π½Π°ΡΠΊΠΎΠ² Π½Π° Π·Π½Π°ΡΠΊΠΈ SVG, Π²Ρ ΠΏΠΎΠΌΠΎΠ³Π°Π΅ΡΠ΅ Π»ΡΠ΄ΡΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, ΡΠ»ΡΡΡΠ°Ρ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ, ΡΠ΅ΡΠΊΠΎΡΡΡ ΠΈ Π½Π°Π΄Π΅ΠΆΠ½ΠΎΡΡΡ Π²Π°ΡΠΈΡ Π·Π½Π°ΡΠΊΠΎΠ² ΠΈ ΡΠΎΠΊΡΠ°ΡΠ°Ρ Π²ΡΠ΅ΠΌΡ Π½Π° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΡ ΡΠ΅ΡΡΡΡΠΎΠ². Π Π΅ΡΠ»ΠΈ Π²Ρ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎ Π½Π°ΡΠΊΠ½ΡΠ»ΠΈΡΡ Π½Π° ΡΡΡ ΡΡΠ°ΡΡΡ, ΠΏΡΡΠ°ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π»ΠΈ Π²Π°ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠΉ ΡΡΠΈΡΡ ΠΈΠ»ΠΈ Π½Π΅Ρ, Ρ Π½Π°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΠΎΡΠ²Π΅Ρ ΡΠ΅ΠΏΠ΅ΡΡ ΠΎΡΠ΅Π²ΠΈΠ΄Π΅Π½.
Π‘Π΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠ°Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ Π·Π½Π°ΡΠΊΠ° ΡΡΠΈΡΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ role = «img»
ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅
Π¦Π΅Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΌΠ΅ΡΠΎΠ΄Π° — ΠΏΠΎΠΊΠ°Π·Π°ΡΡ, ΠΊΠ°ΠΊ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΊΠΎΡΠΎΡΡΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΠ°ΠΉΠ» ΡΡΠΈΡΡΠ° Π΄Π»Ρ Π·Π½Π°ΡΠΊΠΎΠ². ΠΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ΅ΠΌΠ΅ΠΉΡΡΠ²ΠΎ ΡΡΠΈΡΡΠΎΠ², ΡΡΠΈ Π·Π½Π°ΡΠΊΠΈ ΠΎΠ±ΡΡΠ½ΠΎ
ΠΈΡΡΠ΅Π·Π½ΡΡ, Π΅ΡΠ»ΠΈ Π½Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΈΡ
ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΠΎΠ²Π°ΡΡ. ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠ΅Ρ
Π½ΠΈΠΊΡ
ΡΡΠΎΠ±Ρ ΠΎΡΠ»ΠΈΡΠ°ΡΡ ΡΡΠΈΡΡΡ Π·Π½Π°ΡΠΊΠΎΠ² ΠΎΡ ΠΎΠ±ΡΠ΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΈΡΡΠΎΠ² (ΡΠ΅ΠΊΡΡΠ°).
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΠΌ Ρ ΠΎΡΠ»Π°Π±Π»Π΅Π½Π½ΡΠΌ Π·ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΡΠ΅Π±ΡΡΡΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ, ΡΡΠ΅Π½Π°ΡΠΈΠΈ ΠΈΠ»ΠΈ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΏΠ΅ΡΠ΅ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ
ΡΡΠΈΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΄Π»Ρ Π²ΠΎΡΠΏΡΠΈΡΡΠΈΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.ΠΠ΄Π½Π°ΠΊΠΎ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΌΠ΅ΡΡ Π²ΠΎΡΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ
Π·Π½Π°ΡΠΈΠΌΡΠ΅ ΡΡΠΈΡΡΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Π·Π²Π΅Π·Π΄ΠΎΡΠΊΠ°, ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ°ΡΡΠ°Ρ ΠΈΠ·Π±ΡΠ°Π½Π½ΠΎΠ΅, ΠΈΠ»ΠΈ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠ΅ ΠΏΠΈΡΡΠΌΠΎ
Π·Π½Π°ΡΠΎΠΊ Π² ΡΡΡΠ»ΠΊΠ΅.
ΠΠ»ΡΡ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π°Π²ΡΠΎΡ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π» ΡΡΠΈΡΡΡ Π·Π½Π°ΡΠΊΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ role = "img"
. ΠΠ°ΡΠ΅ΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π·Π°ΠΌΠ΅Π½Ρ ΡΡΠΈΡΡΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡΡΡ ΠΊ ΡΡΠΎΠΉ ΡΠ΅ΠΌΠ°Π½ΡΠΈΠΊΠ΅ ΠΈ ΠΈΡΠΊΠ»ΡΡΠΈΡΡ
ΡΠΎΠ»Ρ = "img"
. ΠΡΠΎ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡ ΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΠΈΡ
Π·Π½Π°ΡΠΊΠΎΠ² ΡΡΠΈΡΡΠΎΠ².
ΠΠ΅ΡΠ²ΡΠΉ ΡΠ°Π³ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΡ ΡΡΠΈΡΡΠ° Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ ΡΠ΅ΡΠ΅Π· ΡΠ°ΠΉΠ» CSS.= «icon-«],
[ΠΊΠ»Π°ΡΡ * = «Π·Π½Π°ΡΠΎΠΊ-«] {ΡΠ΅ΠΌΠ΅ΠΉΡΡΠ²ΠΎ ΡΡΠΈΡΡΠΎΠ²: ‘IconFontRoleImg’! important; }
/ * ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ Π·Π½Π°ΡΠΊΠ° * /
.icon-star-bg: Π΄ΠΎ {ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ: «\ e982»; }
ΠΠ° Π²ΡΠΎΡΠΎΠΌ ΡΡΠ°ΠΏΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΠΊΠ»Π°ΡΡΡ, Π°ΡΡΠΈΠ±ΡΡ role = «img» Π΄Π»Ρ ΡΠ΅ΠΌΠ°Π½ΡΠΈΠΊΠΈ ΠΈ Π΄ΠΎΡΡΡΠΏΠ½ΡΠΉ
ΠΈΠΌΡ.
ΠΠ° ΡΡΠ΅ΡΡΠ΅ΠΌ ΡΡΠ°ΠΏΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Β«: notΒ» Π² ΡΠΎΡΠ΅ΡΠ°Π½ΠΈΠΈ Ρ Β«ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠΌ [Π°ΡΡΠΈΠ±ΡΡ]Β»
Π΄Π»Ρ Π·Π°ΠΌΠ΅Π½Ρ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΡ ΡΡΠΈΡΡΠ° ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΎΠ±ΡΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°.
/ * ΠΠ°ΠΌΠ΅Π½ΡΠ΅Ρ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅ ΡΡΠΈΡΡΠ°, Π½ΠΎ ΠΈΡΠΊΠ»ΡΡΠ°Π΅Ρ Π²ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ Π°ΡΡΠΈΠ±ΡΡΠΎΠΌ role = "" img "* /
*: not ([role = "img"]) {ΡΠ΅ΠΌΠ΅ΠΉΡΡΠ²ΠΎ ΡΡΠΈΡΡΠΎΠ²: Verdana, sans-serif! important; }
Icon Fonts — Vuetify
Vuetify ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉ Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΎΠΉ Π·Π½Π°ΡΠΊΠΎΠ² Material Design, Material Icons, Font Awesome 4 ΠΈ Font Awesome 5. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠΊΠΈ Material Design ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
# Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΡΠΈΡΡΠΎΠ² Π·Π½Π°ΡΠΊΠΎΠ²
ΠΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΊΠ»ΡΡΠΈΡΡ ΡΠΊΠ°Π·Π°Π½Π½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Π·Π½Π°ΡΠΊΠΎΠ² (Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ).ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ, Π²ΠΊΠ»ΡΡΠΈΠ² ΡΡΡΠ»ΠΊΡ Π½Π° CDN ΠΈΠ»ΠΈ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°Π² Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Π·Π½Π°ΡΠΊΠΎΠ² Π² Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.
# ΠΠ½Π°ΡΠΊΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ²
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΡΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠ° Π»ΡΠ±ΡΡ Π·Π½Π°ΡΠΊΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² ΠΈ ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΡ Π² Π±ΡΡΠ΅Ρ ΠΎΠ±ΠΌΠ΅Π½Π°, ΡΠ΅Π»ΠΊΠ½ΡΠ² ΡΠ»Π΅ΠΌΠ΅Π½Ρ.
ΠΡΠΎ ΡΡΠΈΡΡ Π·Π½Π°ΡΠΊΠΎΠ² ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ Vuetify. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π²ΠΊΠ»ΡΡΠΈΡΡ Π΅Π³ΠΎ ΡΠ΅ΡΠ΅Π· CDN:
ΠΠ»ΠΈ ΠΊΠ°ΠΊ Π»ΠΎΠΊΠ°Π»ΡΠ½Π°Ρ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΡ:
$ yarn add @ mdi / font -D
// ΠΠΠ
$ npm install @ mdi / font -D
import '@ mdi / font / css / materialdesignicons.css '
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Vue ΠΈΠ· 'vue'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Vuetify ΠΈΠ· vuetify / lib
Vue.use (Vuetify)
ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π½ΠΎΠ²ΡΠΉ Vuetify ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ({
icons: {
iconfont: 'mdi',
},
})
# ΠΠ½Π°ΡΠΊΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² — JS SVG
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΏΡΡΠΈ SVG, ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π² @ mdi / js. ΠΡΠΎ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΠ°Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΠΏΡΠΈ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΡΡΠ²Π°. ΠΠ°ΠΌ Π½ΡΠΆΠ½ΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ Π’ΠΠΠ¬ΠΠ , Π΅ΡΠ»ΠΈ Π²Ρ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ Π·Π½Π°ΡΠΊΠΎΠ² ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ.
$ ΠΏΡΡΠΆΠ° Π΄ΠΎΠ±Π°Π²ΠΈΡΡ @ mdi / js -D
// ΠΠΠ
$ npm install @ mdi / js -D
Π£ΠΊΠ°ΠΆΠΈΡΠ΅ mdiSvg iconfont:
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Vue ΠΈΠ· 'vue'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Vuetify ΠΈΠ· vuetify / lib
Vue.ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ (Vuetify)
ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π½ΠΎΠ²ΡΠΉ Vuetify ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ({
icons: {
iconfont: 'mdiSvg',
},
})
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΠΈΠΌΠΏΠΎΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π²Π°ΠΌΠΈ Π·Π½Π°ΡΠΊΠΎΠ², ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡ Π³ΠΎΡΠ°Π·Π΄ΠΎ ΠΌΠ΅Π½ΡΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΏΠ°ΠΊΠ΅ΡΠ°.
<ΡΠ°Π±Π»ΠΎΠ½>
{{svgPath}}
<ΡΡΠ΅Π½Π°ΡΠΈΠΉ>
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ {mdiAccount} ΠΈΠ· '@ mdi / js'
ΡΠΊΡΠΏΠΎΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ {
Π΄Π°Π½Π½ΡΠ΅: () => ({
svgPath: mdiAccount
}),
}
# ΠΠ½Π°ΡΠΊΠΈ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ²
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° ΡΠ°ΠΊΠ°Ρ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΎ Π²ΡΡΠ΅.ΠΠ»Ρ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² Π±Π΅Π· ΠΏΡΠΎΡΠ΅ΡΡΠ° ΡΠ±ΠΎΡΠΊΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π·Π½Π°ΡΠΊΠΈ ΠΈΠ· CDN
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΡΠΆΡ ΠΈΠ»ΠΈ NPM. ΠΠΌΠ΅ΠΉΡΠ΅ Π² Π²ΠΈΠ΄Ρ, ΡΡΠΎ ΡΡΠΎ Π½Π΅ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠΉ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΉ Google ΠΈ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ ΠΏΠΎΠ»ΡΡΠ°ΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ
$ yarn add material-design-icons-iconfont -D
// ΠΠΠ
$ npm ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»-Π΄ΠΈΠ·Π°ΠΉΠ½-Π·Π½Π°ΡΠΊΠΈ-Π·Π½Π°ΡΠΎΠΊ-ΡΡΠΈΡΡ -D
ΠΠΎΡΠ»Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΏΠ°ΠΊΠ΅ΡΠ° ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠΉΡΠ΅ Π΅Π³ΠΎ Π² ΡΠ²ΠΎΠΉ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ°ΠΉΠ» js.ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΎ main.js
, index.js
ΠΈΠ»ΠΈ app.js
, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡΠΉ Π² ΠΏΠ°ΠΏΠΊΠ΅ src /
. ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ SSR, Ρ Π²Π°Ρ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ ΡΠ°ΠΉΠ» client.js
ΠΈΠ»ΠΈ entry-client.js
.
import 'material-design-icons-iconfont / dist / material-design-icons.css'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Vue ΠΈΠ· 'vue'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Vuetify ΠΈΠ· vuetify / lib
Vue.use (Vuetify)
ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π½ΠΎΠ²ΡΠΉ Vuetify ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ({
icons: {
iconfont: 'md',
},
})
# Font Awesome 4 Icons
Π’ΠΎ ΠΆΠ΅, ΡΡΠΎ ΠΈ Π²ΡΡΠ΅.Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΡΠΎΠ²Π΅ΡΠΈΡΡ ΡΡΠΎ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅ — ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ FontAwesome ΡΠ΅ΡΠ΅Π· cdn:
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° FontAwesome 4 ΡΠ°ΠΊΠ°Ρ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π΅Π³ΠΎ Π±ΠΎΠ»Π΅Π΅ Π½ΠΎΠ²Π°Ρ Π²Π΅ΡΡΠΈΡ, ΡΠΎΠ»ΡΠΊΠΎ ΠΈΠ· Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΡ. ΠΡ Π±ΡΠ΄Π΅ΡΠ΅ Π½Π°ΡΠ΅Π»Π΅Π½Ρ Π½Π° ΡΠ΅ΠΏΠΎ Ρ ΠΏΠΎΡΡΡΡΠ°ΡΡΠΈΠΌ ΡΡΠΈΡΡΠΎΠΌ , Π° Π½Π΅ Π½Π°
@fortawesome
.
$ ΠΏΡΡΠΆΠ° Π΄ΠΎΠ±Π°Π²ΠΈΡΡ font-awesome@4.7.0 -D
// ΠΠΠ
$ npm ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ font-awesome@4.7.0 -D
ΠΠ΅ Π·Π°Π±ΡΠ²Π°ΠΉΡΠ΅, Π²Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠ°ΡΠΏΠΎΠ·Π½Π°Π²Π°ΡΡ CSS. ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ webpack, ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ ΠΈ Π½Π°ΡΡΡΠΎΠΉΡΠ΅ Π·Π°Π³ΡΡΠ·ΡΠΈΠΊ css.
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ 'font-awesome / css / font-awesome.min.css'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Vue ΠΈΠ· 'vue'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Vuetify ΠΈΠ· vuetify / lib
Vue.use (Vuetify)
ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π½ΠΎΠ²ΡΠΉ Vuetify ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ({
icons: {
iconfont: 'fa4',
},
})
# Font Awesome 5 Icons
Π‘Π°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± Π½Π°ΡΠ°ΡΡ ΡΠ°Π±ΠΎΡΡ Ρ FontAwesome - ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ-Π΄ΠΈΡΠΊ.Π Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ Π²Π°ΡΠ΅Π³ΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ index.html
ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΡΠΎΡ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ:
ΠΠ»Ρ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ Π²Π΅ΡΡΠΈΡ FontAwesome , ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠΈΡΠ°Π΅ΠΌΡΠΉ Π²Π°ΠΌΠΈ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ ΠΏΠ°ΠΊΠ΅ΡΠΎΠ²:
$ yarn add @ fortawesome / fontawesome-free -D
// ΠΠΠ
$ npm install @ fortawesome / fontawesome-free -D
Π ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠΎΡΠΊΠ΅ Π²Ρ
ΠΎΠ΄Π° ΠΏΡΠΎΡΡΠΎ ΠΈΠΌΠΏΠΎΡΡΠΈΡΡΠΉΡΠ΅ Π²ΡΠ΅Ρ
ΠΏΠ°ΠΊΠ΅ΡΠΎΠ².css . ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠ΅Π½Π½ΡΠΉ ΠΏΡΠΎΠ΅ΠΊΡ webpack, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ Π½Π°ΡΡΡΠΎΠΈΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΡΠ°ΠΉΠ»ΠΎΠ² .css ΠΈ
Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π·Π°Π³ΡΡΠ·ΡΠΈΠΊΠ° css webpack. ΠΡΠ»ΠΈ Π²Ρ ΡΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Vue CLI, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ΄Π΅Π»Π°Π½ΠΎ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ.
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ '@ fortawesome / fontawesome-free / css / all.css'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Vue ΠΈΠ· 'vue'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Vuetify ΠΈΠ· vuetify / lib
Vue.use (Vuetify)
ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π½ΠΎΠ²ΡΠΉ Vuetify ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ({
icons: {
iconfont: 'fa',
},
})
# Font Awesome SVG Icons
ΠΠΎΠ±Π°Π²ΡΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ.
$ 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
ΠΠ°ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎ font-awesome-icon
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ faSvg
ΠΊΠ°ΠΊ iconfont Π² ΠΊΠΎΠ½ΡΠΈΠ³ΡΡΠ°ΡΠΈΠΈ Vuetify.
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ 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',
},
})
# ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΡ Π·Π½Π°ΡΠΊΠΎΠ²
ΠΠΎΠΏΡΡΡΠΈΠΌ, Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ·ΡΠ²Π°Π΅Ρ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ Π·Π½Π°ΡΠΎΠΊ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅ Vuetify. ΠΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ-ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΡ ΠΈΠ»ΠΈ Π²ΡΡΡΠ½ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΠΉ Π·Π½Π°ΡΠΎΠΊ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΏΠΎΡΠ²Π»ΡΠ΅ΡΡΡ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΡΡΡΠΎΠΈΡΡ Π΅Π³ΠΎ Π½Π° Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅.
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Vue ΠΈΠ· 'vue'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Vuetify ΠΈΠ· vuetify / lib
Vue.ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ (Vuetify)
ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π½ΠΎΠ²ΡΠΉ Vuetify ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ({
icons: {
iconfont: 'fa',
ΡΠ΅Π½Π½ΠΎΡΡΠΈ: {
ΠΎΡΠΌΠ΅Π½ΠΈΡΡ: 'fas fa-ban',
ΠΌΠ΅Π½Ρ: 'fas fa-ellipsis-v',
},
},
})
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π½Π°Π·Π½Π°ΡΠΈΡΡ svg Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π·Π½Π°ΡΠΊΠ°. ΠΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ svg Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΡΡ Π±Π΅Π· ΠΎΠ±ΠΎΠ»ΠΎΡΠΊΠΈ
. ΠΠ»Ρ ΠΈΠΌΠΏΠΎΡΡΠ° Π±ΠΎΠ»Π΅Π΅ ΡΠ»ΠΎΠΆΠ½ΠΎΠ³ΠΎ SVG ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Π·Π½Π°ΡΠΎΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°.
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ 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 ',
},
},
})
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ Π·Π½Π°ΡΠΊΠΎΠ², Ρ ΠΊΠΎΡΠΎΡΠΎΠΉ Π½Π΅Ρ ΠΏΡΠ΅Π΄ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ.
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Vue ΠΈΠ· 'vue'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Vuetify ΠΈΠ· vuetify / lib
const MY_ICONS = {
ΠΏΠΎΠ»Π½ΡΠΉ: '...',
ΠΡΠΌΠ΅Π½Π°: '...',
Π±Π»ΠΈΠ·ΠΊΠΎ: '...',
ΡΠ΄Π°Π»ΡΡΡ: '...',
Π§ΠΈΡΡΠΎ: '...',
ΡΡΠΏΠ΅Ρ
: '...',
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ: '...',
ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅: '...',
ΠΎΡΠΈΠ±ΠΊΠ°: '...',
ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ°Ρ: '...',
ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ: '...',
checkboxOn: '...',
checkboxOff: '...',
checkboxIndeterminate: '...',
ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»Ρ: '...',
Π‘ΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ: '...',
ΡΠ°ΡΡΠΈΡΡΡΡ: '...',
ΠΌΠ΅Π½Ρ: '...',
ΠΏΠΎΠ΄Π³ΡΡΠΏΠΏΠ°: '...',
ΠΏΠ°Π΄Π°ΡΡ: '...',
radioOn: '...',
radioOff: '...',
ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ: '... ',
ratingEmpty: '...',
ratingFull: '...',
ratingHalf: '...',
Π·Π°Π³ΡΡΠ·ΠΊΠ°: '...',
ΠΏΠ΅ΡΠ²ΡΠΉ: '...',
ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ: '...',
ΡΠ°Π·Π²Π΅ΡΠ½ΡΡΡ: '...',
ΡΠ°ΠΉΠ»: '...',
}
Vue.use (Vuetify)
ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π½ΠΎΠ²ΡΠΉ Vuetify ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ({
icons: {
Π·Π½Π°ΡΠ΅Π½ΠΈΡ: MY_ICONS,
},
})
# ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ Π·Π½Π°ΡΠΊΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠΊΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
Vuetify Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡ Π»ΡΠ±ΡΠ΅ ΡΡΡΠΎΠΊΠΈ Π·Π½Π°ΡΠΊΠΎΠ², ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΠ΅ Π² ΠΏΡΠ» Π΄ΠΎΡΡΡΠΏΠ½ΡΡ ΠΏΡΠ΅ΡΠ΅ΡΠΎΠ². ΠΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΡΡΡΠΎΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² Π²Π°ΡΠ΅ΠΌ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ, ΠΏΡΠΎΡΡΠΎ ΡΡΡΠ»Π°ΡΡΡ Π½Π° Π³Π»ΠΎΠ±Π°Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ .
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ 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',
},
},
})
ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°ΡΡ, ΡΡΠΎ Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠ΅Π³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ Π·Π½Π°ΡΠΎΠΊ Ρ Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠΎΠΉ.ΠΠΎΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ
Ρ ΡΡΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΠΎΠΉ.
<ΡΠ°Π±Π»ΠΎΠ½>
$ vuetify.icons.product
$ product
<ΡΡΠ΅Π½Π°ΡΠΈΠΉ>
ΡΠΊΡΠΏΠΎΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ {
Π΄Π°Π½Π½ΡΠ΅: () => ({
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ: {
ΠΈΠΌΡ: 'ΠΠΆΠΎΠ½ ΠΠ΅ΠΉΠ΄Π΅Ρ',
ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ°: 'pc',
},
}),
Π²ΡΡΠΈΡΠ»Π΅Π½ΠΎ: {
ΠΠ»Π°ΡΡΠΎΡΠΌΠ° () {
Π²Π΅ΡΠ½ΡΡΡ '$' + ΡΡΠΎ.user.platform
}
}
}
# ΠΠ½Π°ΡΠΊΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ²
ΠΠΌΠ΅ΡΡΠΎ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΡΡ ΠΏΡΠ΅Π΄ΡΡΡΠ°Π½ΠΎΠ²ΠΎΠΊ ΡΡΠΈΡΡΠΎΠ² Π·Π½Π°ΡΠΊΠΎΠ² Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ². ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΡ Π·Π½Π°ΡΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅ Vuetify, Π½Π° ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅.
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Vue ΠΈΠ· 'vue'
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Vuetify ΠΈΠ· vuetify / lib
ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ IconComponent ΠΈΠ· './IconComponent.vue'
Vue.use (Vuetify)
ΡΠΊΡΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ Π½ΠΎΠ²ΡΠΉ Vuetify ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ({
icons: {
ΡΠ΅Π½Π½ΠΎΡΡΠΈ: {
ΠΏΡΠΎΠ΄ΡΠΊΡ: {
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ: IconComponent,
props: {
ΠΈΠΌΡ: 'ΠΏΡΠΎΠ΄ΡΠΊΡ',
},
},
},
},
})
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅, ΡΡΠΎΠ±Ρ Π²Π°Ρ Π·Π½Π°ΡΠΎΠΊ SVG ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ Π½Π°ΡΠ»Π΅Π΄ΠΎΠ²Π°Π» ΡΠ²Π΅ΡΠ° ΠΈ ΠΌΠ°ΡΡΡΠ°Π±, ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΠΊ Π½Π΅ΠΌΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ CSS:
.Π²Π°Ρ-svg-icon
fill: currentColor
# ΠΡΡΡΡΡΡΠ²ΡΡΡ Π·Π½Π°ΡΠΊΠΈ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ²
ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ Π·Π½Π°ΡΠΊΠΈ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ² ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΎΡΡΡΡΡΡΠ²ΡΡΡ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ΅Π»ΠΎΠ²Π΅ΠΊ
ΠΈ person_outline
Π΄ΠΎΡΡΡΠΏΠ½Ρ, Π½ΠΎ visibility_outline
- Π½Π΅Ρ, Π° Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΡ
- Π΅ΡΡΡ. Π§ΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΡΡΡΡΡΡΠ²ΡΡΡΠΈΠ΅ Π·Π½Π°ΡΠΊΠΈ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ², Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΠΈΡΡ Π½ΠΈΠΆΠ΅ (ΡΠ΄Π°Π»ΠΈΡΠ΅ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΈΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°, Π΅ΡΠ»ΠΈ ΠΎΠ½ ΡΠΆΠ΅ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°Π½).
<ΡΡΡΠ»ΠΊΠ°
rel = "ΡΠ°Π±Π»ΠΈΡΠ° ΡΡΠΈΠ»Π΅ΠΉ"
href = "https: //fonts.googleapis.com / css? family = ΠΠ°ΡΠ΅ΡΠΈΠ°Π» + ΠΠΊΠΎΠ½ΠΊΠΈ | ΠΠ°ΡΠ΅ΡΠΈΠ°Π» + ΠΠΊΠΎΠ½ΠΊΠΈ + ΠΠΎΠ½ΡΡΡ | ΠΠ°ΡΠ΅ΡΠΈΠ°Π» + ΠΠΊΠΎΠ½ΠΊΠΈ + ΠΠ²Π° + Π’ΠΎΠ½ | ΠΠ°ΡΠ΅ΡΠΈΠ°Π» + ΠΠΊΠΎΠ½ΠΊΠΈ + ΠΡΡΠ³Π»ΡΠΉ | ΠΠ°ΡΠ΅ΡΠΈΠ°Π» + ΠΠΊΠΎΠ½ΠΊΠΈ + Sharp Β»
/>
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ²ΠΎΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ. ΠΠΎΠΏΡΡΡΠΈΠΌ, ΡΡΠΎ @ / components / MaterialIcon.vue .
<ΡΠ°Π±Π»ΠΎΠ½>
{{parsed.id}}
<ΡΡΠ΅Π½Π°ΡΠΈΠΉ>
ΡΠΊΡΠΏΠΎΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ {
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'
}
}
}
ΠΠ°ΡΠ΅ΠΌ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π·Π°ΡΠ΅Π³ΠΈΡΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΡΠ½ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅.
ΠΈΠΌΠΏΠΎΡΡ 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 (['Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΡ', 'Π²ΠΈΠ΄ΠΈΠΌΠΎΡΡΡ_Π²ΡΠΊΠ»'])
}
}
})
ΠΠ°ΠΊΠΎΠ½Π΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΊΠΈΠ΅ Π·Π½Π°ΡΠΊΠΈ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»ΠΎΠ².
$ visibility_outline
ΠΠΎΡΠΎΠ²Ρ ΠΊ Π±ΠΎΠ»ΡΡΠ΅ΠΌΡ?
ΠΡΠΎΠ΄ΠΎΠ»ΠΆΠ°ΠΉΡΠ΅ ΠΎΠ±ΡΡΠ΅Π½ΠΈΠ΅, ΠΏΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Ρ ΡΠ²ΡΠ·Π°Π½Π½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, Π²ΡΠ±ΡΠ°Π½Π½ΡΠΉ ΠΠΎΠΌΠ°Π½Π΄ΠΎΠΉ, ΠΈΠ»ΠΈ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΠΉΡΠ΅ΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΡ ΡΡΡΠ»ΠΎΠΊ Π½ΠΈΠΆΠ΅.
Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° GitHub
ΠΠΎΡΠ»Π΅Π΄Π½Π΅Π΅ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅: 29.11.2021, 5:14:51
Π¨ΡΠΈΡΡ Segoe Fluent Icons - ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ Windows
- 17 ΠΌΠΈΠ½ΡΡ Π΄Π»Ρ ΡΡΠ΅Π½ΠΈΡ
ΠΡΠ° ΡΡΡΠ°Π½ΠΈΡΠ° ΠΏΠΎΠ»Π΅Π·Π½Π°?
ΠΡΠ΅Π½ΠΈΡΠ΅ ΡΠ²ΠΎΠΉ ΠΎΠΏΡΡ
Π΄Π°
ΠΠ΅Ρ
ΠΡΠ±ΠΎΠΉ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΎΡΠ·ΡΠ²?
ΠΡΠ·ΡΠ² Π±ΡΠ΄Π΅Ρ ΠΎΡΠΏΡΠ°Π²Π»Π΅Π½ Π² Microsoft: ΠΏΡΠΈ Π½Π°ΠΆΠ°ΡΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ Β«ΠΡΠΏΡΠ°Π²ΠΈΡΡΒ» Π²Π°Ρ ΠΎΡΠ·ΡΠ² Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ Π΄Π»Ρ ΡΠ»ΡΡΡΠ΅Π½ΠΈΡ ΠΏΡΠΎΠ΄ΡΠΊΡΠΎΠ² ΠΈ ΡΡΠ»ΡΠ³ Microsoft.ΠΠΎΠ»ΠΈΡΠΈΠΊΠ° ΠΊΠΎΠ½ΡΠΈΠ΄Π΅Π½ΡΠΈΠ°Π»ΡΠ½ΠΎΡΡΠΈ.
ΠΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ Π½Π° ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΠ΅
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°ΡΠΈΠΈ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΠΏΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΡΠΈΡΡΠ° Segoe Fluent Icons ΠΈ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Ρ Π²ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ Unicode ΠΈ ΠΎΠΏΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ.
ΠΠ°ΠΆΠ½ΡΠ΅ API :
Π‘Π²Π΅Π΄Π΅Π½ΠΈΡ ΠΎ Segoe Fluent Icons
ΠΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°
Π‘ Π²ΡΠΏΡΡΠΊΠΎΠΌ Windows 11 ΡΡΠΈΡΡ Segoe Fluent Icons Π·Π°ΠΌΠ΅Π½ΠΈΡ Segoe MDL2 Assets Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΡΠΈΡΡΠ° Π΄Π»Ρ Π·Π½Π°ΡΠΊΠΎΠ² ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ². Segoe MDL2 Assets ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΡΡΡΠΏΠ΅Π½, Π½ΠΎ ΠΌΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ Π²Π°ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½ΠΎΠ²ΡΠ΅ Segoe Fluent Icons .
ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π·Π½Π°ΡΠΊΠΎΠ², Π²ΠΊΠ»ΡΡΠ΅Π½Π½ΡΡ Π² ΡΡΠΈΡΡ Segoe Fluent Icons , ΠΏΡΠΈΠ²ΡΠ·Π°Π½Ρ ΠΊ ΠΎΠ±Π»Π°ΡΡΠΈ ΡΠ°ΡΡΠ½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Unicode (PUA). ΠΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ PUA - ΡΡΠΎ Π½Π΅ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ Unicode, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΡΡΠΈΡΡΠΎΠ² ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΡΠ²ΠΎΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΠΈΠΌΠ²ΠΎΠ»Ρ. ΠΡΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΏΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΠΈΠΌΠ²ΠΎΠ»ΡΠ½ΠΎΠ³ΠΎ ΡΡΠΈΡΡΠ°, Π½ΠΎ ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΠΈ, ΠΊΠΎΠ³Π΄Π° Segoe Fluent Icons Π½Π΅Π΄ΠΎΡΡΡΠΏΠ΅Π½.
ΠΠ½Π°ΡΠΊΠΈ ΡΡΠΈΡΡΠ° Segoe Fluent Icons Π½Π΅ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΡΠ΅ΠΊΡΡΠ΅. ΠΡΠΎ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ, ΡΡΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠ°ΡΡΠ΅ Β«ΡΠ»ΠΎΠ²ΠΊΠΈΒ», ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΡΡΡΠ΅Π»ΠΊΠΈ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΡΠΊΡΡΡΠΈΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ. Π’ΠΎΡΠ½ΠΎ ΡΠ°ΠΊ ΠΆΠ΅, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²ΡΠ΅ Π½ΠΎΠ²ΡΠ΅ Π·Π½Π°ΡΠΊΠΈ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΈΡ Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ Ρ Π½ΡΠ»Π΅Π²ΠΎΠΉ ΡΠΈΡΠΈΠ½ΠΎΠΉ; ΠΌΡ ΡΠ±Π΅Π΄ΠΈΠ»ΠΈΡΡ, ΡΡΠΎ ΠΎΠ½ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΊΠ°ΠΊ Π½Π°Π±ΠΎΡ.
ΠΠ°ΡΠ»ΠΎΠ΅Π½ΠΈΠ΅ ΠΈ Π·Π΅ΡΠΊΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
ΠΡΠ΅ Π³Π»ΠΈΡΡ Π² Segoe Fluent Icons ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ Π²ΡΡΠΎΡΠΎΠΉ ΠΈ Π»Π΅Π²ΠΎΠΉ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠΉ ΡΠΎΡΠΊΠΎΠΉ, ΠΏΠΎΡΡΠΎΠΌΡ ΡΡΡΠ΅ΠΊΡΡ Π½Π°ΡΠ»ΠΎΠ΅Π½ΠΈΡ ΠΈ ΡΠ°ΡΠΊΡΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π΄ΠΎΡΡΠΈΠ³Π½ΡΡΡ ΠΏΡΡΠ΅ΠΌ ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π³Π»ΠΈΡΠΎΠ² Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π΅.Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½ ΡΠ΅ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΡΡ, Π½Π°ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΏΠΎΠ²Π΅ΡΡ ΠΊΡΠ°ΡΠ½ΠΎΠ³ΠΎ ΡΠ΅ΡΠ΄ΡΠ° Π½ΡΠ»Π΅Π²ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ.
<Π‘Π΅ΡΠΊΠ°>
ΠΠ½ΠΎΠ³ΠΈΠ΅ Π·Π½Π°ΡΠΊΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅ΡΡ Π·Π΅ΡΠΊΠ°Π»ΡΠ½ΡΠ΅ ΡΠΎΡΠΌΡ, Π΄ΠΎΡΡΡΠΏΠ½ΡΠ΅ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π½Π° ΡΠ·ΡΠΊΠ°Ρ , ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΠΈΡ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½Π½ΠΎΡΡΡ ΡΠ΅ΠΊΡΡΠ° ΡΠΏΡΠ°Π²Π° Π½Π°Π»Π΅Π²ΠΎ, ΡΠ°ΠΊΠΈΡ ΠΊΠ°ΠΊ Π°ΡΠ°Π±ΡΠΊΠΈΠΉ, ΡΠ°ΡΡΠΈ ΠΈ ΠΈΠ²ΡΠΈΡ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ
ΠΡΠ»ΠΈ Π²Ρ ΡΠ°Π·ΡΠ°Π±Π°ΡΡΠ²Π°Π΅ΡΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° C # / VB / C ++ ΠΈ XAML, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π³Π»ΠΈΡΡ ΠΈΠ· Segoe Fluent Icons Ρ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½ΠΈΠ΅ΠΌ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ².
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π³Π»ΠΈΡ ΠΈΠ· ΡΡΠΈΡΡΠ° Segoe Fluent Icons *, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ Π²ΠΊΠ»ΡΡΠ΅Π½ Π² ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½ΠΈΠ΅ Symbol, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ FontIcon .
ΠΡ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ΅ΡΡΡΡ SymbolThemeFontFamily
Π΄Π»Ρ Π΄ΠΎΡΡΡΠΏΠ° ΠΊ Segoe Fluent Icons Π²ΠΌΠ΅ΡΡΠΎ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΡΠΈΡΡΠ° ΠΏΠΎ ΠΈΠΌΠ΅Π½ΠΈ:
ΠΠ°ΠΊ ΠΌΠ½Π΅ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΡΠΎΡ ΡΡΠΈΡΡ?
- Π Windows 11: ΠΠ°ΠΌ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ, ΡΡΠΈΡΡ ΠΈΠ΄Π΅Ρ Π² ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡΠ΅ Ρ Windows.
- Π Windows 10: Segoe Fluent Icons ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π½Π΅ Π²ΠΊΠ»ΡΡΠ΅Π½ Π² Windows 10. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°ΡΠ°ΡΡ Π΅Π³ΠΎ Π·Π΄Π΅ΡΡ.
- ΠΠ° Mac ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΎΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π΅: Π·Π΄Π΅ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Segoe Fluent Icons ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΠΈΡΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΡΡΠΈΡΡ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅, Π½ΠΎ Π½Π΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΠΏΡΠ°Π²ΠΈΡΡ Π΅Π³ΠΎ Π½Π° Π΄ΡΡΠ³ΡΡ ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ.
Π‘ΠΏΠΈΡΠΎΠΊ Π·Π½Π°ΡΠΊΠΎΠ²
ΠΠΌΠ΅ΠΉΡΠ΅ Π² Π²ΠΈΠ΄Ρ, ΡΡΠΎ ΡΡΠΈΡΡ Segoe Fluent Icons Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π±ΠΎΠ»ΡΡΠ΅ Π·Π½Π°ΡΠΊΠΎΠ², ΡΠ΅ΠΌ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π΄Π΅ΡΡ ΠΏΠΎΠΊΠ°Π·Π°ΡΡ.ΠΠ½ΠΎΠ³ΠΈΠ΅ Π·Π½Π°ΡΠΊΠΈ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΎΠ±ΡΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅ Π½ΠΈΠ³Π΄Π΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ.
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅
ΠΠ»ΠΈΡΡ Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠ°ΠΌΠΈ ΠΎΡ E0- Π΄ΠΎ E5- (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, E001, E5B1) Π² Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΠΏΠΎΠΌΠ΅ΡΠ΅Π½Ρ ΠΊΠ°ΠΊ ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΠ΅ ΠΈ ΠΏΠΎΡΡΠΎΠΌΡ Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡΡΡΡ.
Π ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ°Π±Π»ΠΈΡΠ°Ρ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ Π²ΡΠ΅ Π³Π»ΠΈΡΡ Segoe Fluent Icons ΠΈ ΠΈΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π² ΠΊΠΎΠ΄ΠΈΡΠΎΠ²ΠΊΠ΅ Unicode ΠΈ ΠΎΠΏΠΈΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΈΠΌΠ΅Π½Π°. ΠΡΠ±Π΅ΡΠΈΡΠ΅ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΠΈΠ· ΡΠ»Π΅Π΄ΡΡΡΠ΅Π³ΠΎ ΡΠΏΠΈΡΠΊΠ°, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π³Π»ΠΈΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ΠΎΠΌ PUA, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΎΠ½ΠΈ ΠΏΡΠΈΠ½Π°Π΄Π»Π΅ΠΆΠ°Ρ.
PUA E700-E900
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅ Π³Π»ΠΈΡΠΎΠ² ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΡΠΊΠΈ Unicode Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ ΠΎΡ E7- Π΄ΠΎ E9-.
Π Π½Π°ΡΠ°Π»Ρ
PUA EA00-EC00
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅ Π³Π»ΠΈΡΠΎΠ² ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΡΠΊΠΈ Unicode Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ ΠΎΡ EA- Π΄ΠΎ EC-.
Π Π½Π°ΡΠ°Π»Ρ
PUA ED00-EF00
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅ Π³Π»ΠΈΡΠΎΠ² ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΡΠΊΠΈ Unicode Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ ΠΎΡ ED- Π΄ΠΎ EF-.
Π Π½Π°ΡΠ°Π»Ρ
PUA F000-F200
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅ Π³Π»ΠΈΡΠΎΠ² ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΡΠΊΠΈ Unicode Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ ΠΎΡ F0- Π΄ΠΎ F2-.
Π Π½Π°ΡΠ°Π»Ρ
PUA F300-F500
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅ Π³Π»ΠΈΡΠΎΠ² ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΡΠΊΠΈ Unicode Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ ΠΎΡ F3- Π΄ΠΎ F5-.
Π Π½Π°ΡΠ°Π»Ρ
PUA F600-F800
Π ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΉ ΡΠ°Π±Π»ΠΈΡΠ΅ Π³Π»ΠΈΡΠΎΠ² ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠΎΡΠΊΠΈ Unicode Ρ ΠΏΡΠ΅ΡΠΈΠΊΡΠΎΠΌ ΠΎΡ F6- Π΄ΠΎ F8-.
Π Π½Π°ΡΠ°Π»Ρ
.