20 ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Π±ΠΎΡΠΎΠΊ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ — ΡΡΠΈΡΡΠΎΠ²
ΠΠΊΠΎΠ½ΠΊΠΈ Π½ΡΠΆΠ½Ρ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ Π²Π΅Π± β Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ, ΠΈ Ρ ΡΡΠΈΠΌ ΠΎΡΠ΅Π½Ρ ΡΠ»ΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΏΠΎΡΠΈΡΡ. ΠΠΊΠΎΠ½ΠΊΠΈ ΡΠΎ Π½ΡΠΆΠ½Ρ, Π½ΠΎ Π½Π΅ Π²ΡΠ΅Π³Π΄Π° ΠΈΡ ΡΠ΄Π°ΡΡΡΡ Π½Π°ΠΉΡΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠΌΠΈ ΠΈ ΠΊ ΡΠΎΠΌΡ ΠΆΠ΅ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΌΠΈ. ΠΠΎ ΡΡΠΎΠΌΡ ΡΠ΅Π³ΠΎΠ΄Π½Ρ Ρ Ρ ΠΎΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΡ ΠΠ°ΠΌ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΡ Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΡ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠ°ΡΠ°ΡΡ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΡΠ²ΠΎΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΡΠΊΠΈΡ ΡΠ΅Π»ΡΡ . Π― Π½Π°Π΄Π΅ΡΡΡ, ΡΡΠΎ ΡΡΠ° ΠΏΠΎΠ΄Π±ΠΎΡΠΊΠ° Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ»Π΅Π·Π½Π° Π΄Π»Ρ ΠΠ°Ρ. Π£Π΄Π°ΡΠΈ π
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎΒ http://speckyboy.comΒ ΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ:
ΠΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΎΡ Π°Π΄ΠΌΠΈΠ½ ΠΏΠ°Π½Π΅Π»ΠΈΒ WordPress
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ΅Π»ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² ΡΡΠΈΠ»Π΅Β iOS7
Π‘ΠΊΠ°ΡΠ°ΡΡ
360 ΡΠ»Π΅Π³Π°Π½ΡΠ½ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ
Π‘ΠΊΠ°ΡΠ°ΡΡ
95 Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ βΒ Dripicons
Π‘ΠΊΠ°ΡΠ°ΡΡ
Iconia β ΠΊΡΡΡΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΠ΅ΠΌΠ°ΡΠΈΠΊΡ ΠΈ ΡΡΠΈΠ»Ρ
Π‘ΠΊΠ°ΡΠ°ΡΡ
Π‘Π΅ΡΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² ΠΠ΅ΡΡΠΎ ΡΡΠΈΠ»Π΅
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΊΠΎΠ½ΠΊΠΈ Ρ ΡΠΎΠ½ΠΊΠΈΠΌΠΈ Π»ΠΈΠ½ΠΈΡΠΌΠΈ ΠΎΡΒ Petras Nargela
Π‘ΠΊΠ°ΡΠ°ΡΡ
528 ΡΡΡΠ½ΡΡ ΠΈ ΠΏΡΠΎΡΡΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠ΅ Flat ΠΈΠΊΠΎΠ½ΠΊΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
Genericons β ΡΡΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΠ½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π΄Π»Ρ ΠΠΎΡΠ΄ΠΏΡΠ΅ΡΡ
Π‘ΠΊΠ°ΡΠ°ΡΡ
218 ΠΈΠΊΠΎΠ½ΠΎΠΊ β ΡΡΠΈΡΡΠΎΠ²
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ΅Π»ΡΠ΅ ΠΈ ΡΡΠΈΠ»ΡΠ½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Ρ ΡΠΎΠ½ΠΊΠΈΠΌΠΈ Π»ΠΈΠ½ΠΈΡΠΌΠΈ
Π‘ΠΊΠ°ΡΠ°ΡΡ
150 ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·Π½ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΎΡΒ Dario Ferrando
Π‘ΠΊΠ°ΡΠ°ΡΡ
Π§ΡΡΠ½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΡΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΡΡΠΈΠ»Π΅
Π‘ΠΊΠ°ΡΠ°ΡΡ
Flat ΠΈΠΊΠΎΠ½ΠΊΠΈ βΒ Minimal
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΡΡΡΠ΅ Π±Π΅Π»ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
Π‘ΠΊΠ°ΡΠ°ΡΡ
1286 ΠΈΠΊΠΎΠ½ΠΎΠΊ ΡΡΠΈΡΡΠΎΠ² Π½Π° ΡΠ°Π·Π½ΡΡ ΡΠ΅ΠΌΡ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠΊΠΎΠ½ΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° βΒ Goodies
Π‘ΠΊΠ°ΡΠ°ΡΡ
Π Π°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·Π½ΡΠ΅ ΠΈ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΡΡΠΈΡΡΡ
Π‘ΠΊΠ°ΡΠ°ΡΡ
58 ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ
Π‘ΠΊΠ°ΡΠ°ΡΡ
Π‘ΠΎΡΠΈΠ°Π»ΡΠ½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ β ΡΡΠΈΡΡΡ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΡΡΠ³Π»ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ β ΡΡΠΈΡΡΡ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ Π·Π°ΠΊΠ»Π°Π΄ΠΎΠΊ
Π‘ΠΊΠ°ΡΠ°ΡΡ
ΠΠ΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ°ΡΡ
Π‘ΠΊΠ°ΡΠ°ΡΡ
Π’Π°Π±Π»ΠΈΡΠ° Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΈΠΊΠΎΠ½ΠΎΠΊ Font Awesome
ΠΡΠΈΠ²Π΅ΡΡΡΠ²ΡΡ. ΠΠ°Π²Π΅ΡΠ½ΠΎΠ΅ Π²Ρ ΡΠΆΠ΅ Π·Π½Π°Π΅ΡΠ΅ ΠΎ ΡΠ°ΠΊΠΎΠΌ Π·Π°ΠΌΠ΅ΡΠ°ΡΠ΅Π»ΡΠ½ΠΎΠΌ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠ΅ ΠΊΠ°ΠΊ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠΉ ΡΡΠΈΡΡ ΠΎΡ Font Awesome Π΄Π»Ρ ΡΠ°ΠΉΡΠ°.
ΠΡΠ»ΠΈ Π½Π΅Ρ, ΡΠΎ Π²ΠΊΡΠ°ΡΡΠ΅ ΡΠ°ΡΡΠΊΠ°ΠΆΡ, ΡΡΠΎ Π½Π°Π±ΠΎΡ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΠ΅ΠΌΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π½Π° ΡΠ°ΠΉΡ ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·Π½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π½ΠΎ ΡΠ°ΠΌΠΎΠ΅ Π²Π°ΠΆΠ½ΠΎΠ΅ ΡΡΠΎ ΡΠΎ ΡΡΠΎ Ρ Π½ΠΈΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΊΠ°ΠΊ Ρ ΠΎΠ±ΡΡΠ½ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ, ΡΠΎ Π΅ΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΊ ΠΈΠΊΠΎΠ½ΠΊΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ, ΡΠ²Π΅Ρ, ΡΠ΅Π½Ρ, ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡ ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·Π½ΡΠ΅ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ° ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
ΠΡΠΎ ΠΎΡΠ΅Π½Ρ ΡΠ΄ΠΎΠ±Π½ΠΎ ΠΈ Π½Π΅ Π½ΡΠΆΠ½ΠΎ Π² ΡΠΎΡΠΎΡΠΎΠΏΠ΅ ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ Π½Π°ΡΠ΅Π·Π°ΡΡ ΠΊΠ°ΠΊΠΈΠ΅ ΡΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π½Ρ ΠΈ ΠΏΠ»ΡΡ ΡΡΠΎ ΠΎΡΠ΅Π½Ρ ΡΡΠΈΠ»ΡΠ½ΠΎ ΠΈ ΠΊΡΠ°ΡΠΈΠ²ΠΎ ΡΠΌΠΎΡΡΠΈΡΡΡ, Ρ ΡΠΆΠ΅ Π½Π΅ Π³ΠΎΠ²ΠΎΡΡ ΠΎ ΡΠΎΠΌ ΡΡΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π½Π°Π³ΡΡΠΆΠ°ΡΡ Π²Π°Ρ ΡΠ°ΠΉΡ ΠΈ ΠΎΠ½ ΠΌΠ΅Π΄Π»Π΅Π½Π½Π΅Π΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, Π² Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²ΡΠ΅ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΡΠ΅.
ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ Font Awesome Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ, ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π΅ΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ, ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠΊΠ°ΡΠ°ΡΡ ΠΈ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π½Π° ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ ΠΈΠ»ΠΈ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΡΡΠΌΠΎΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ ΠΈΠ· ΡΠ΅ΡΠ²Π΅ΡΠ° CDNJS.
Π―Β Π½Π΅ Π±ΡΠ΄Ρ ΡΠ΅ΠΉΡΠ°Ρ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ Π΄Π΅ΡΠ°Π»ΡΠ½ΠΎ ΠΊΠ°ΠΊ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈΒ Awesome Π½Π° ΡΠ²ΠΎΠΉ ΡΠ°ΠΉΡ Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΎΠΉ Π²ΡΠ΅Ρ ΡΠ°ΠΉΠ»ΠΎΠ², ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΡΠ°ΡΡΡ ΡΡΡΠΎΡΠΊΡ ΠΎ Π΄ΡΡΠ³ΠΎΠΌ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅,Β Π° Π΄Π»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎ Π±Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΠΈΡ ΠΈΠ· ΡΠ΅ΡΡΡΡΠ°Β CDNJS Π²Π°ΠΌ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π½Π° ΡΠ°ΠΉΡ Π³Π΄Π΅ ΡΠΎ Π½Π°Π΄ </head> Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡΠΎΠΊΡ:
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css»>
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css»> |
ΠΠΎΡΠ»Π΅ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΡΡΠΎΠΉ ΡΡΡΠΎΠΊΠΈ Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠΌ ΡΡΠΈΡΡΠΎΠΌ.
ΠΠΊ, Π΄ΡΠΌΠ°Ρ ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΡΡΠΈΡΡΒ Font Awesome Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ·Π½Π°ΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ· ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΡ ΡΠΈΡΡΠ΅ΠΌ, ΡΠ΅Π³ΠΎΠ΄Π½Ρ Ρ ΠΆΠ΅ Ρ ΠΎΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡΒ Font Awesome ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· ΡΡΠΈΡΡΠΎΠ² ΠΈΠΌΠ΅Π½Π½ΠΎ Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ· css ΡΠ°ΠΉΠ»Π°.
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΡΠΈΡΡ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ html ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅Π³Β <i> ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠ°ΠΊ:
<i aria-hidden=»true»></i>
<i aria-hidden=»true»></i> |
ΠΠΎ ΠΈΠ½ΠΎΠ³Π΄Π° Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π΅Π³ΠΎ Π² ΡΠ°ΠΉΠ»Ρ css, Π° ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΡΠΎ Π²ΡΡΠ°Π²ΠΈΡΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΡΡΠΈΡΡΠ° Π² ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Π΅ΠΉ Π½Π΅ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ, ΠΎΠ½ ΠΏΠΎΠΏΡΠΎΡΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ, Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅Β ΡΡΠΈΡΡΠ°, ΠΈ ΠΌΡ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ Π²ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠΈΡΡΠ° Font Awesome Π΄Π»Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΡ ΠΈΡ Π² css.
ΠΠΎΠΏΡΡΡΠΈΠΌ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΊ ΠΊΠ°ΠΊΠΎΠΌΡ ΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅ Π²ΠΏΠ΅ΡΠ΅Π΄ΠΈ Π½Π΅Π³ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈΠΊΠΎΠ½ΠΊΡΒ Awesome, Π½ΠΈΠΆΠ΅ Π½Π°Π²Π΅Π΄Ρ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠ°ΠΊ ΡΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ:
.element:before { content: «\f000»; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; color: #000; font-size: 18px; padding-right: 0.5em; position: absolute; top: 10px; left: 0; }
.element:before { Β Β Β Β content: «\f000»; Β Β Β Β font-family: FontAwesome; Β Β Β Β font-style: normal; Β Β Β Β font-weight: normal; Β Β Β Β text-decoration: inherit; Β Β Β Β color: #000; Β Β Β Β font-size: 18px; Β Β Β Β padding-right: 0.5em; Β Β Β Β position: absolute; Β Β Β Β top: 10px; Β Β Β Β left: 0; } |
Π’ΠΎ Π΅ΡΡΡ ΠΌΡ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ :before ΠΊ Π½ΡΠΆΠ½ΠΎΠΌΡ Π½Π°ΠΌ Π±Π»ΠΎΠΊΡ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΡΡΠΈΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊΒ font-family: FontAwesome; ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ°ΠΌΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΊΠΈΒ content: «\f000»; ( ), Π²ΠΎΡ ΠΈ Π²ΡΠ΅ Π² ΠΏΡΠΈΠ½ΡΠΈΠΏΠ΅, ΡΠ΅ΠΏΠ΅ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠ° ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ Π²ΠΏΠ΅ΡΠ΅Π΄ΠΈ ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, Π²ΡΠ΅ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ css ΡΡΠΈΠ»ΠΈ ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π·Π΄Π΅ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ Π²ΠΈΠ΄Π° ΠΈΠΊΠΎΠ½ΠΊΠΈ.
Π ΡΠ°ΠΊ Π½ΠΈΠΆΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡ Π΄Π»Ρ Π²Π°Ρ ΠΏΠΎΠ»Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΠΈΠΊΠΎΠ½ΠΎΠΊΒ Awesome Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΠ΅ΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π²ΡΠ΅Ρ Π΅Π³ΠΎ ΡΡΠΈΡΡΠΎΠ². ΠΡ ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»ΡΠ±ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ Π² ΡΠ²ΠΎΠ΅ΠΌ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½Π½ΠΎΠΌ ΡΠ°ΠΉΠ»Π΅Β font-awesome.min.css Π½ΠΎ Ρ Π΄ΡΠΌΠ°Ρ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΄ΠΎΠ±Π½Π΅Π΅ ΡΠ·Π½Π°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΈΡΡΠ° Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π²ΡΠΈΡΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½Π½ΠΎΠΉ Π½Π° Π½Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ ΡΠ°Π±Π»ΠΈΡΠ΅ΠΉ.
Π‘ΠΏΠΈΡΠΎΠΊ Π·Π½Π°ΡΠΊΠΎΠ² ΡΡΠΈΡΡΠ° Awesome ΠΈ ΠΈΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ Π΄Π»Ρ CSS
fa-glass»\f000″
fa-music»\f001″
fa-search»\f002″
fa-envelope-o»\f003″
fa-heart»\f004″
fa-star»\f005″
fa-star-o»\f006″
fa-user»\f007″
fa-film»\f008″
fa-th-large»\f009″
fa-th»\f00a»
fa-th-list»\f00b»
fa-check»\f00c»
fa-times»\f00d»
fa-search-plus»\f00e»
fa-search-minus»\f010″
fa-power-off»\f011″
fa-signal»\f012″fa-cog»\f013″
fa-trash-o»\f014″
fa-home»\f015″
fa-file-o»\f016″
fa-clock-o»\f017″
fa-road»\f018″
fa-download»\f019″
fa-arrow-circle-o-down»\f01a»
fa-arrow-circle-o-up»\f01b»
fa-inbox»\f01c»
fa-play-circle-o»\f01d»
fa-repeat»\f01e»
fa-refresh»\f021″
fa-list-alt»\f022″
fa-lock»\f023″
fa-flag»\f024″
fa-headphones»\f025″
fa-volume-off»\f026″
fa-volume-down»\f027″
fa-volume-up»\f028″
fa-qrcode»\f029″
fa-barcode»\f02a»
fa-tag»\f02b»
fa-tags»\f02c»
fa-book»\f02d»
fa-bookmark»\f02e»
fa-print»\f02f»
fa-camera»\f030″
fa-font»\f031″
fa-bold»\f032″
fa-italic»\f033″
fa-text-height»\f034″
fa-text-width»\f035″
fa-align-left»\f036″
fa-align-center»\f037″
fa-align-right»\f038″
fa-align-justify»\f039″
fa-list»\f03a»
fa-outdent»\f03b»
fa-indent»\f03c»
fa-video-camera»\f03d»
fa-picture-o»\f03e»
fa-pencil»\f040″
fa-map-marker»\f041″
fa-adjust»\f042″
fa-tint»\f043″
fa-pencil-square-o»\f044″
fa-share-square-o»\f045″
fa-check-square-o»\f046″
fa-arrows»\f047″
fa-step-backward»\f048″
fa-fast-backward»\f049″
fa-backward»\f04a»
fa-play»\f04b»
fa-pause»\f04c»
fa-stop»\f04d»
fa-forward»\f04e»
fa-fast-forward»\f050″
fa-step-forward»\f051″
fa-eject»\f052″
fa-chevron-left»\f053″
fa-chevron-right»\f054″
fa-plus-circle»\f055″
fa-minus-circle»\f056″
fa-times-circle»\f057″
fa-check-circle»\f058″
fa-question-circle»\f059″
fa-info-circle»\f05a»
fa-crosshairs»\f05b»
fa-times-circle-o»\f05c»
fa-check-circle-o»\f05d»
fa-ban»\f05e»
fa-arrow-left»\f060″
fa-arrow-right»\f061″
fa-arrow-up»\f062″
fa-arrow-down»\f063″
fa-share»\f064″
fa-expand»\f065″
fa-compress»\f066″
fa-plus»\f067″
fa-minus»\f068″
fa-asterisk»\f069″
fa-exclamation-circle»\f06a»
fa-gift»\f06b»
fa-leaf»\f06c»
fa-fire»\f06d»
fa-eye»\f06e»
fa-eye-slash»\f070″
fa-exclamation-triangle»\f071″
fa-plane»\f072″
fa-calendar»\f073″
fa-random»\f074″
fa-comment»\f075″
fa-magnet»\f076″
fa-chevron-up»\f077″
fa-chevron-down»\f078″
fa-retweet»\f079″
fa-shopping-cart»\f07a»
fa-folder»\f07b»
fa-folder-open»\f07c»
fa-arrows-v»\f07d»
fa-arrows-h»\f07e»
fa-bar-chart»\f080″
fa-twitter-square»\f081″
fa-facebook-square»\f082″
fa-camera-retro»\f083″
fa-key»\f084″
fa-cogs»\f085″
fa-comments»\f086″
fa-thumbs-o-up»\f087″
fa-thumbs-o-down»\f088″
fa-star-half»\f089″
fa-heart-o»\f08a»
fa-sign-out»\f08b»
fa-linkedin-square»\f08c»
fa-thumb-tack»\f08d»
fa-external-link»\f08e»
fa-sign-in»\f090″
fa-trophy»\f091″
fa-github-square»\f092″
fa-upload»\f093″
fa-lemon-o»\f094″
fa-phone»\f095″
fa-square-o»\f096″
fa-bookmark-o»\f097″
fa-phone-square»\f098″
fa-twitter»\f099″
fa-facebook»\f09a»
fa-github»\f09b»
fa-unlock»\f09c»
fa-credit-card»\f09d»
fa-rss»\f09e»
fa-hdd-o»\f0a0″
fa-bullhorn»\f0a1″
fa-bell»\f0f3″
fa-certificate»\f0a3″
fa-hand-o-right»\f0a4″
fa-hand-o-left»\f0a5″
fa-hand-o-up»\f0a6″
fa-hand-o-down»\f0a7″
fa-arrow-circle-left»\f0a8″
fa-arrow-circle-right»\f0a9″
fa-arrow-circle-up»\f0aa»
fa-arrow-circle-down»\f0ab»
fa-globe»\f0ac»
fa-wrench»\f0ad»
fa-tasks»\f0ae»
fa-filter»\f0b0″
fa-briefcase»\f0b1″
fa-arrows-alt»\f0b2″
fa-users»\f0c0″
fa-link»\f0c1″
fa-cloud»\f0c2″
fa-flask»\f0c3″
fa-scissors»\f0c4″
fa-files-o»\f0c5″
fa-paperclip»\f0c6″
fa-floppy-o»\f0c7″
fa-square»\f0c8″
fa-bars»\f0c9″
fa-list-ul»\f0ca»
fa-list-ol»\f0cb»
fa-strikethrough»\f0cc»
fa-underline»\f0cd»
fa-table»\f0ce»
fa-magic»\f0d0″
fa-truck»\f0d1″
fa-pinterest»\f0d2″
fa-pinterest-square»\f0d3″
fa-google-plus-square»\f0d4″
fa-google-plus»\f0d5″
fa-money»\f0d6″
fa-caret-down»\f0d7″
fa-caret-up»\f0d8″
fa-caret-left»\f0d9″
fa-caret-right»\f0da»
fa-columns»\f0db»
fa-sort»\f0dc»
fa-sort-desc»\f0dd»
fa-sort-asc»\f0de»
fa-envelope»\f0e0″
fa-linkedin»\f0e1″
fa-undo»\f0e2″
fa-gavel»\f0e3″
fa-tachometer»\f0e4″
fa-comment-o»\f0e5″
fa-comments-o»\f0e6″
fa-bolt»\f0e7″
fa-sitemap»\f0e8″
fa-umbrella»\f0e9″
fa-clipboard»\f0ea»
fa-lightbulb-o»\f0eb»
fa-exchange»\f0ec»
fa-cloud-download»\f0ed»
fa-cloud-upload»\f0ee»
fa-user-md»\f0f0″
fa-stethoscope»\f0f1″
fa-suitcase»\f0f2″
fa-bell-o»\f0a2″
fa-coffee»\f0f4″
fa-cutlery»\f0f5″
fa-file-text-o»\f0f6″
fa-building-o»\f0f7″
fa-hospital-o»\f0f8″
fa-ambulance»\f0f9″
fa-medkit»\f0fa»
fa-fighter-jet»\f0fb»
fa-beer»\f0fc»
fa-h-square»\f0fd»
fa-plus-square»\f0fe»
fa-angle-double-left»\f100″
fa-angle-double-right»\f101″
fa-angle-double-up»\f102″
fa-angle-double-down»\f103″
fa-angle-left»\f104″
fa-angle-right»\f105″
fa-angle-up»\f106″
fa-angle-down»\f107″
fa-desktop»\f108″
fa-laptop»\f109″
fa-tablet»\f10a»
fa-mobile»\f10b»
fa-circle-o»\f10c»
fa-quote-left»\f10d»
fa-quote-right»\f10e»
fa-spinner»\f110″
fa-circle»\f111″
fa-reply»\f112″
fa-github-alt»\f113″
fa-folder-o»\f114″
fa-folder-open-o»\f115″
fa-smile-o»\f118″
fa-frown-o»\f119″
fa-meh-o»\f11a»
fa-gamepad»\f11b»
fa-keyboard-o»\f11c»
fa-flag-o»\f11d»
fa-flag-checkered»\f11e»
fa-terminal»\f120″
fa-code»\f121″
fa-reply-all»\f122″
fa-star-half-o»\f123″
fa-location-arrow»\f124″
fa-crop»\f125″
fa-code-fork»\f126″
fa-chain-broken»\f127″
fa-question»\f128″
fa-info»\f129″
fa-exclamation»\f12a»
fa-superscript»\f12b»
fa-subscript»\f12c»
fa-eraser»\f12d»
fa-puzzle-piece»\f12e»
fa-microphone»\f130″
fa-microphone-slash»\f131″
fa-shield»\f132″
fa-calendar-o»\f133″
fa-fire-extinguisher»\f134″
fa-rocket»\f135″
fa-maxcdn»\f136″
fa-chevron-circle-left»\f137″
fa-chevron-circle-right»\f138″
fa-chevron-circle-up»\f139″
fa-chevron-circle-down»\f13a»
fa-html5″\f13b»
fa-css3″\f13c»
fa-anchor»\f13d»
fa-unlock-alt»\f13e»
fa-bullseye»\f140″
fa-ellipsis-h»\f141″
fa-ellipsis-v»\f142″
fa-rss-square»\f143″
fa-play-circle»\f144″
fa-ticket»\f145″
fa-minus-square»\f146″
fa-minus-square-o»\f147″
fa-level-up»\f148″
fa-level-down»\f149″
fa-check-square»\f14a»
fa-pencil-square»\f14b»
fa-external-link-square»\f14c»
fa-share-square»\f14d»
fa-compass»\f14e»
fa-caret-square-o-down»\f150″
fa-caret-square-o-up»\f151″
fa-caret-square-o-right»\f152″
fa-eur»\f153″
fa-gbp»\f154″
fa-usd»\f155″
fa-inr»\f156″
fa-jpy»\f157″
fa-rub»\f158″
fa-krw»\f159″
fa-btc»\f15a»
fa-file»\f15b»
fa-file-text»\f15c»
fa-sort-alpha-asc»\f15d»
fa-sort-alpha-desc»\f15e»
fa-sort-amount-asc»\f160″
fa-sort-amount-desc»\f161″
fa-sort-numeric-asc»\f162″
fa-sort-numeric-desc»\f163″
fa-thumbs-up»\f164″
fa-thumbs-down»\f165″
fa-youtube-square»\f166″
fa-youtube»\f167″
fa-xing»\f168″
fa-xing-square»\f169″
fa-youtube-play»\f16a»
fa-dropbox»\f16b»
fa-stack-overflow»\f16c»
fa-instagram»\f16d»
fa-flickr»\f16e»
fa-adn»\f170″
fa-bitbucket»\f171″
fa-bitbucket-square»\f172″
fa-tumblr»\f173″
fa-tumblr-square»\f174″
fa-long-arrow-down»\f175″
fa-long-arrow-up»\f176″
fa-long-arrow-left»\f177″
fa-long-arrow-right»\f178″
fa-apple»\f179″
fa-windows»\f17a»
fa-android»\f17b»
fa-linux»\f17c»
fa-dribbble»\f17d»
fa-skype»\f17e»
fa-foursquare»\f180″
fa-trello»\f181″
fa-female»\f182″
fa-male»\f183″
fa-gratipay»\f184″
fa-sun-o»\f185″
fa-moon-o»\f186″
fa-archive»\f187″
fa-bug»\f188″
fa-vk»\f189″
fa-weibo»\f18a»
fa-renren»\f18b»
fa-pagelines»\f18c»
fa-stack-exchange»\f18d»
fa-arrow-circle-o-right»\f18e»
fa-arrow-circle-o-left»\f190″
fa-caret-square-o-left»\f191″
fa-dot-circle-o»\f192″
fa-wheelchair»\f193″
fa-vimeo-square»\f194″
fa-try»\f195″
fa-plus-square-o»\f196″
fa-space-shuttle»\f197″
fa-slack»\f198″
fa-envelope-square»\f199″
fa-wordpress»\f19a»
fa-openid»\f19b»
fa-university»\f19c»
fa-graduation-cap»\f19d»
fa-yahoo»\f19e»
fa-google»\f1a0″
fa-reddit»\f1a1″
fa-reddit-square»\f1a2″
fa-stumbleupon-circle»\f1a3″
fa-stumbleupon»\f1a4″
fa-delicious»\f1a5″
fa-digg»\f1a6″
fa-pied-piper»\f1a7″
fa-pied-piper-alt»\f1a8″
fa-drupal»\f1a9″
fa-joomla»\f1aa»
fa-language»\f1ab»
fa-fax»\f1ac»
fa-building»\f1ad»
fa-child»\f1ae»
fa-paw»\f1b0″
fa-spoon»\f1b1″
fa-cube»\f1b2″
fa-cubes»\f1b3″
fa-behance»\f1b4″
fa-behance-square»\f1b5″
fa-steam»\f1b6″
fa-steam-square»\f1b7″
fa-recycle»\f1b8″
fa-car»\f1b9″
fa-taxi»\f1ba»
fa-tree»\f1bb»
fa-spotify»\f1bc»
fa-deviantart»\f1bd»
fa-soundcloud»\f1be»
fa-database»\f1c0″
fa-file-pdf-o»\f1c1″
fa-file-word-o»\f1c2″
fa-file-excel-o»\f1c3″
fa-file-powerpoint-o»\f1c4″
fa-file-image-o»\f1c5″
fa-file-archive-o»\f1c6″
fa-file-audio-o»\f1c7″
fa-file-video-o»\f1c8″
fa-file-code-o»\f1c9″
fa-vine»\f1ca»
fa-codepen»\f1cb»
fa-jsfiddle»\f1cc»
fa-life-ring»\f1cd»
fa-circle-o-notch»\f1ce»
fa-rebel»\f1d0″
fa-empire»\f1d1″
fa-git-square»\f1d2″
fa-git»\f1d3″
fa-hacker-news»\f1d4″
fa-tencent-weibo»\f1d5″
fa-qq»\f1d6″
fa-weixin»\f1d7″
fa-paper-plane»\f1d8″
fa-paper-plane-o»\f1d9″
fa-history»\f1da»
fa-circle-thin»\f1db»
fa-header»\f1dc»
fa-paragraph»\f1dd»
fa-sliders»\f1de»
fa-share-alt»\f1e0″
fa-share-alt-square»\f1e1″
fa-bomb»\f1e2″
fa-futbol-o»\f1e3″
fa-tty»\f1e4″
fa-binoculars»\f1e5″
fa-plug»\f1e6″
fa-slideshare»\f1e7″
fa-twitch»\f1e8″
fa-yelp»\f1e9″
fa-newspaper-o»\f1ea»
fa-wifi»\f1eb»
fa-calculator»\f1ec»
fa-paypal»\f1ed»
fa-google-wallet»\f1ee»
fa-cc-visa»\f1f0″
fa-cc-mastercard»\f1f1″
fa-cc-discover»\f1f2″
fa-cc-amex»\f1f3″
fa-cc-paypal»\f1f4″
fa-cc-stripe»\f1f5″
fa-bell-slash»\f1f6″
fa-bell-slash-o»\f1f7″
fa-trash»\f1f8″
fa-copyright»\f1f9″
fa-at»\f1fa»
fa-eyedropper»\f1fb»
fa-paint-brush»\f1fc»
fa-birthday-cake»\f1fd»
fa-area-chart»\f1fe»
fa-pie-chart»\f200″
fa-line-chart»\f201″
fa-lastfm»\f202″
fa-lastfm-square»\f203″
fa-toggle-off»\f204″
fa-toggle-on»\f205″
fa-bicycle»\f206″
fa-bus»\f207″
fa-ioxhost»\f208″
fa-angellist»\f209″
fa-cc»\f20a»
fa-ils»\f20b»
fa-meanpath»\f20c»
fa-buysellads»\f20d»
fa-connectdevelop»\f20e»
fa-dashcube»\f210″
fa-forumbee»\f211″
fa-leanpub»\f212″
fa-sellsy»\f213″
fa-shirtsinbulk»\f214″
fa-simplybuilt»\f215″
fa-skyatlas»\f216″
fa-cart-plus»\f217″
fa-cart-arrow-down»\f218″
fa-diamond»\f219″
fa-ship»\f21a»
fa-user-secret»\f21b»
fa-motorcycle»\f21c»
fa-street-view»\f21d»
fa-heartbeat»\f21e»
fa-venus»\f221″
fa-mars»\f222″
fa-mercury»\f223″
fa-transgender»\f224″
fa-transgender-alt»\f225″
fa-venus-double»\f226″
fa-mars-double»\f227″
fa-venus-mars»\f228″
fa-mars-stroke»\f229″
fa-mars-stroke-v»\f22a»
fa-mars-stroke-h»\f22b»
fa-neuter»\f22c»
fa-genderless»\f22d»
fa-facebook-official»\f230″
fa-pinterest-p»\f231″
fa-whatsapp»\f232″
fa-server»\f233″
fa-user-plus»\f234″
fa-user-times»\f235″
fa-bed»\f236″
fa-viacoin»\f237″
fa-train»\f238″
fa-subway»\f239″
fa-medium»\f23a»
fa-y-combinator»\f23b»
fa-optin-monster»\f23c»
fa-opencart»\f23d»
fa-expeditedssl»\f23e»
fa-battery-full»\f240″
fa-battery-three-quarters»\f241″
fa-battery-half»\f242″
fa-battery-quarter»\f243″
fa-battery-empty»\f244″
fa-mouse-pointer»\f245″
fa-i-cursor»\f246″
fa-object-group»\f247″
fa-object-ungroup»\f248″
fa-sticky-note»\f249″
fa-sticky-note-o»\f24a»
fa-cc-jcb»\f24b»
fa-cc-diners-club»\f24c»
fa-clone»\f24d»
fa-balance-scale»\f24e»
fa-hourglass-o»\f250″
fa-hourglass-start»\f251″
fa-hourglass-half»\f252″
fa-hourglass-end»\f253″
fa-hourglass»\f254″
fa-hand-rock-o»\f255″
fa-hand-paper-o»\f256″
fa-hand-scissors-o»\f257″
fa-hand-lizard-o»\f258″
fa-hand-spock-o»\f259″
fa-hand-pointer-o»\f25a»
fa-hand-peace-o»\f25b»
fa-trademark»\f25c»
fa-registered»\f25d»
fa-creative-commons»\f25e»
fa-gg»\f260″
fa-gg-circle»\f261″
fa-tripadvisor»\f262″
fa-odnoklassniki»\f263″
fa-odnoklassniki-square»\f264″
fa-get-pocket»\f265″
fa-wikipedia-w»\f266″
fa-safari»\f267″
fa-chrome»\f268″
fa-firefox»\f269″
fa-opera»\f26a»
fa-internet-explorer»\f26b»
fa-television»\f26c»
fa-contao»\f26d»
fa-500px»\f26e»
fa-amazon»\f270″
fa-calendar-plus-o»\f271″
fa-calendar-minus-o»\f272″
fa-calendar-times-o»\f273″
fa-calendar-check-o»\f274″
fa-industry»\f275″
fa-map-pin»\f276″
fa-map-signs»\f277″
fa-map-o»\f278″
fa-map»\f279″
fa-commenting»\f27a»
fa-commenting-o»\f27b»
fa-houzz»\f27c»
fa-vimeo»\f27d»
fa-black-tie»\f27e»
fa-fonticons»\f280″
ΠΠ°Ρ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°ΡΡ
06Π‘Π΅Π½2018
05Π‘Π΅Π½2018
28ΠΡΠ½2018
ΠΠΊΠΎΠ½ΠΎΡΠ½ΡΠΉ ΡΡΠΈΡΡ Font Awesome
ΠΠΎΡΠΎΠ³ΠΈΠ΅ ΡΠΈΡΠ°ΡΠ΅Π»ΠΈ, ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²ΡΡ ΠΠ°Ρ! Π Π°ΡΡΠΊΠ°Π·Π°ΡΡ ΠΎ ΡΡΠΈΡΡΠ΅ Font Awesome Ρ ΠΏΠ»Π°Π½ΠΈΡΠΎΠ²Π°Π» Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄Π°Π²Π½ΠΎ, Π² ΡΠ²ΠΎΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎ Π΅Π³ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡ ΠΈ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΏΡΠΈΠ²Π΅Π΄Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠΎΠ² Π² Π΅Π³ΠΎ ΠΏΠΎΠ»ΡΠ·Ρ.
ΠΡΠ»ΠΈ ΠΡ Π΄ΠΎ ΡΠΈΡ ΠΏΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΠ°ΡΡΡΠΎΠ²ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π»Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΠ°ΠΉΡΠ΅, ΡΠΎ Π²ΡΠ½ΡΠΆΠ΄Π΅Π½ ΠΎΠ³ΠΎΡΡΠΈΡΡ β ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΠΎΠ½ΠΈ ΡΠΎΠ·Π΄Π°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ http-Π·Π°ΠΏΡΠΎΡΡ ΠΊ ΡΠ΅ΡΠ²Π΅ΡΡ, Π° ΠΏΡΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ΅ΡΡΡΡ ΡΠ΅ΡΠΊΠΎΡΡΡ.
Π Π°Π½ΡΡΠ΅ Π΄Π»Ρ ΡΠ½ΠΈΠΆΠ΅Π½ΠΈΡ ΡΠΈΡΠ»Π° Π·Π°ΠΏΡΠΎΡΠΎΠ² Ρ ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΡΠ» Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² CSS-ΡΠΏΡΠ°ΠΉΡΡ, ΡΠ°ΠΊΠΎΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ ΡΠΊΠΎΡΠΎΡΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΡΠ°ΠΉΡΠ° Π°ΠΊΡΡΠ°Π»ΡΠ½ΠΎ ΠΏΠΎ ΡΠ΅ΠΉ Π΄Π΅Π½Ρ. ΠΠ΄Π½Π°ΠΊΠΎ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ Π½Π΅ ΡΠ΅ΡΠ°Π΅ΡΡΡ ΠΈ ΠΏΡΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΎΠ½ΠΈ ΡΠ΅ΡΡΡΡ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄.
ΠΠΊΠΎΠ½ΠΎΡΠ½ΡΠΉ ΡΡΠΈΡΡ Font Awesome ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΎΠ³ΡΠΎΠΌΠ½ΡΠΉ Π½Π°Π±ΠΎΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ ΠΈ ΠΏΡΠ΅Π²ΠΎΡΡ ΠΎΠ΄Π½ΠΎ Π²ΡΠ³Π»ΡΠ΄ΡΡ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ Π²ΡΡΠΎΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡ! ΠΠ° webliberty.ru ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΏΠΎΠ²ΡΠ΅ΠΌΠ΅ΡΡΠ½ΠΎ: Π² ΡΠΎΡΠΌΠ΅ ΠΏΠΎΠΈΡΠΊΠ°, Π² ΡΠΏΠΈΡΠΊΠ΅ ΡΡΠ±ΡΠΈΠΊ, Π²ΠΎΠ·Π»Π΅ Π΄Π°ΡΡ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΠΈ ΡΡΠ°ΡΡΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ Π² ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅ΠΉ ΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ.
ΠΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΡ ΡΡΠΈΡΡΠΎΠ²
Π’ΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Ρ Π΄Π°Π²Π½ΠΈΡ ΠΏΠΎΡ Ρ ΠΎΡΠΎΡΠΎ ΡΠ΅Π±Ρ Π·Π°ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π»ΠΈ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΠ°ΠΉΡΠ°, Π² ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΡ ΡΠΏΠΎΡ Ρ ΠΈΡ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΠΎ Π²ΡΡΠ΅ΡΠ½ΡΡΡ Π½ΠΎΠ²ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ CSS3, SVG ΠΈ ΡΡΠΈΡΡΡ Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ.
Π‘ ΡΠ΅ΠΌ ΡΠ²ΡΠ·Π°Π½Π° ΠΈΡ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΡ? Π Π΅ΡΠ°ΡΡΡΡ ΡΠΎΠ»Ρ ΡΡΠ³ΡΠ°Π»ΠΈ Π³ΠΈΠ±ΠΊΠΎΡΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ, ΠΏΡΠΎΡΡΠΎΡΠ° ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΠΏΡΠΎΠ΅ΠΊΡΠ΅. ΠΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°:
- Π ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ Π±ΠΎΠ»Π΅Π΅ 500 Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π΄Π»Ρ ΡΠ°ΠΉΡΠ°.
- ΠΠΊΠΎΠ½ΠΊΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ Π΄ΠΎ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π±Π΅Π· ΠΏΠΎΡΠ΅ΡΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°.
- Π‘ΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS β ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°, ΡΠ²Π΅Ρ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°.
- ΠΠ΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π²ΠΊΠ»ΡΡΠ΅Π½Π½Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° JavaScript Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.
- ΠΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡ (IE7 ΠΈ Π²ΡΡΠ΅), ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
ΠΠ°ΡΡΠ΄Ρ Ρ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°ΠΌΠΈ ΡΡΠΎΠΈΡ ΡΠΏΠΎΠΌΡΠ½ΡΡΡ ΠΎ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠ°Ρ , ΠΎΠ½ΠΈ, ΠΊ ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΡΠΎΠΆΠ΅ Π΅ΡΡΡ, Π½ΠΎ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ Π½Π΅Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅:
- Π ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΡΡΠΈΡΡΡ ΠΌΠΎΠ³ΡΡ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΠΎ ΡΠ°Π·Π½ΠΎΠΌΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΈ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ.
- ΠΠΈΠ·Π°ΠΉΠ½Π΅ΡΡ Π΄Π΅ΡΠ°Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΠ°Π±ΠΎΡΠ°Π»ΠΈ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΎΠ΄Π½Π°ΠΊΠΎ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π²Π΅ΡΠΎΡΡΠ½ΠΎΡΡΡ, ΡΡΠΎ ΠΡ Π½Π΅ Π½Π°ΠΉΠ΄Π΅ΡΠ΅ Π½ΡΠΆΠ½ΡΡ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
ΠΠ°ΠΊ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΡΡΠΈΡΡ Font Awesome
ΠΠ΅ΡΠ²ΡΠΉ ΠΈ ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΡΡΠΈΡΡ β Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π΅Π³ΠΎ Ρ Π²Π½Π΅ΡΠ½Π΅Π³ΠΎ CDN, Π²ΡΡΠ°Π²Π»ΡΡ Π² ΡΠ΅ΠΊΡΠΈΡ <head>
ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΠΎΠΊΡ:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
ΠΡΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΡΡΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠ΅ ΡΡΠΈΡΡΠ° Font Awesome Π½Π° ΡΠ²ΠΎΠΉ Ρ
ΠΎΡΡΠΈΠ½Π³. ΠΠ°Π³ΡΡΠ·ΠΈΡΠ΅ Π°ΡΡ
ΠΈΠ² Ρ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ°, ΡΠ°ΡΠΏΠ°ΠΊΡΠΉΡΠ΅ ΠΈ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΠ΅ ΠΏΠ°ΠΏΠΊΠΈ css
ΠΈ fonts
Π½Π° ΡΠ΅ΡΠ²Π΅ΡΠ΅ Π² ΠΊΠ°ΡΠ°Π»ΠΎΠ³ font-awesome
. ΠΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π°Π½Π°Π»ΠΎΠ³ΠΈΡΠ½ΠΎ, ΠΌΠ΅Π½ΡΡ Π»ΠΈΡΡ ΠΏΡΡΡ ΠΊ ΡΠ°ΠΉΠ»Ρ:
<link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">
ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ Font Awesome Π½Π° ΡΠ°ΠΉΡΠ΅
ΠΠ»Ρ ΡΠΎΠ³ΠΎ ΡΡΠΎΠ±Ρ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎΡΡΡΠΏΠ°Π΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ: Π½Π°Ρ ΠΎΠ΄ΠΈΠΌ Π½Π° ΡΠ°ΠΉΡΠ΅ Π½ΡΠΆΠ½ΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ ΠΈ ΠΊΠΎΠΏΠΈΡΡΠ΅ΠΌ Π΅Π΅ ΠΊΠΎΠ΄, Π·Π°ΡΠ΅ΠΌ Π²ΡΡΠ°Π²Π»ΡΠ΅ΠΌ Π² HTML-ΡΠ΅ΠΆΠΈΠΌΠ΅:
<i></i>
ΠΠ° ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ°ΠΉΡΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π΅ΡΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠ½ΠΎΠ³Π΄Π° ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ°ΠΉΡΠ° Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ ΡΠΎΡΠΌΠΈΡΡΡΡΡΡ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, PHP ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ, ΠΈ Π½Π΅Ρ ΠΏΡΡΠΌΠΎΠΉ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ HTML, ΡΠΎΠ³Π΄Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΏΡΠ΅Π²Π΄ΠΎΠΊΠ»Π°ΡΡΡ Π² ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°Ρ CSS.
Π― ΠΏΠΎΠΊΠ°ΠΆΡ ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π²ΠΈΠ΄ΠΆΠ΅ΡΠ° ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΉ WordPress. ΠΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π½Π° ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°:
<div>Π ΡΠ±ΡΠΈΠΊΠΈ Π±Π»ΠΎΠ³Π°</div>
<ul>
<li>
<a href="/category/wordpress/">WordPress</a>
</li>
</ul>
ΠΠ»Ρ ΠΊΠ»Π°ΡΡΠ° cat-item
Ρ Π΄ΠΎΠ±Π°Π²ΠΈΠ» ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ before
ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ:
.cat-item:before {
content: "\f07c";
font-family: FontAwesome;
color:#393;
padding-right:10px
}
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ content
Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ ΠΈΠΊΠΎΠ½ΠΊΡ ΠΈΠ· hex-ΠΊΠΎΠ΄Π° ΡΠ°Π±Π»ΠΈΡΡ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ² Unicode, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ·Π½Π°ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Ρ ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ:
Unicode \f07c
ΠΊΠ°ΠΊ ΡΠ°Π· ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ hex-ΠΊΠΎΠ΄Ρ Π½ΡΠΆΠ½ΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ Π² Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ
ΠΊΠ»Π°ΡΡΠΎΠ².
ΠΠ° ΡΡΠΎΠΌ Π·Π°Π²Π΅ΡΡΠ°Ρ ΠΊΡΠ°ΡΠΊΠΈΠΉ ΠΎΠ±Π·ΠΎΡ, Π΅ΡΠ»ΠΈ ΠΏΠΎΡΠ²ΠΈΠ»ΠΈΡΡ Π²ΠΎΠΏΡΠΎΡΡ β Π·Π°Π΄Π°Π²Π°ΠΉΡΠ΅ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ . ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ Π»ΠΈ ΠΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ Font Awesome Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅, Π±ΡΡΡ ΠΌΠΎΠΆΠ΅Ρ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠΈΡΡ?
ΠΠ΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ-ΠΈΠΊΠΎΠ½ΠΊΠΈ
Π‘Π΅Π³ΠΎΠ΄Π½Ρ Π²Π°ΡΠ΅ΠΌΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΡ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΡ ΡΡΠΈΡΡΠΎΠ²-ΠΈΠΊΠΎΠ½ΠΎΠΊ. Π’Π°ΠΊΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΠΌΠ΅ΡΡ ΡΡΠ΄ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ² ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΡΡΠ°Π΄ΠΈΡΠΈΠΎΠ½Π½ΡΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ²Π΅Ρ, ΡΡΠΎ Π»Π΅Π³ΠΊΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ css. Π’Π°ΠΊΒ ΠΆΠ΅ ΠΏΡΠΎΡΡΠΎ ΡΠ°ΠΊΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ ΠΊΒ Π½ΠΈΠΌ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ. ΠΠΊΠΎΠ½ΠΊΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΊΠ°ΡΠ°ΡΡ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄Ρ ΠΏΠΎΒ ΡΡΡΠ»ΠΊΠ΅.
Β
Batch.
SosaΒ
MetroΒ UIΒ Β
SignifyΒ LiteΒ
ElusiveΒ IconsΒ
PulsarJSΒ
PeculiarΒ
icomoon
iconicΒ
entypo
Β
Ligature
Β
RaphaΓ«lΒ
typicons
maki
FontelloΒ
pictonic
modernΒ pictograms
ΠΡΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Ρ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ: Β HenryΒ JonesΒ
ΠΠ²ΡΠΎΡ ΠΏΠΎΠ΄Π±ΠΎΡΠΊΠΈΒ βΒ ΠΠ΅ΠΆΡΡΠΊΠ°
Π‘ΠΌΠΎΡΡΠΈΡΠ΅Β ΡΠ°ΠΊΠΆΠ΅:
Β
Β
ΠΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° Π΄Π»Ρ ΡΠ°ΠΉΡΠ°
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ ΡΠ°ΠΊΠΎΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ°, ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡΡ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΠΈ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ. ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ, ΡΠ°Π·Π±Π΅ΡΡΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ ΡΠ°Π±ΠΎΡΡ Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° ΠΈ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΡΠΈΠ°Π½ΡΡ ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
ΠΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΡΠΎΡΡΠΎ ΡΡΠΈΡΡ. ΠΠΎ Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ ΠΎΠ±ΡΡΠ½ΡΡ ΡΡΠΈΡΡΠΎΠ² ΠΎΠ½ΠΈ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ Π½Π΅ Π±ΡΠΊΠ²Ρ ΠΈ ΡΠΈΡΡΡ, Π° Π·Π½Π°ΡΠΊΠΈ (ΠΈΠΊΠΎΠ½ΠΊΠΈ).
ΠΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° ΠΈΠΌΠ΅ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΠΏΠ΅ΡΠ΅Π΄ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ Π² Π²ΠΈΠ΄Π΅ ΡΠ°ΡΡΡΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ:
- ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊ Π½ΠΈΠΌ Π»ΡΠ±ΡΠ΅ CSS ΡΡΠΈΠ»ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΊ ΠΎΠ±ΡΡΠ½ΠΎΠΌΡ ΡΠ΅ΠΊΡΡΡ;
- Π₯ΠΎΡΠΎΡΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ, Ρ.ΠΊ. ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° ΡΠ²Π»ΡΡΡΡΡ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ. Π’.Π΅. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΡΠΌΠ΅Π½ΡΡΠ°ΡΡ ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π΅Π· ΠΏΠΎΡΠ΅ΡΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²Π°;
- ΠΠ΅Π½ΡΡΠ΅Π΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ HTTP-Π·Π°ΠΏΡΠΎΡΠΎΠ², ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ ΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΏΠΎ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Ρ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ HTTP-Π·Π°ΠΏΡΠΎΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΡ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΡΡΠ΅Π±ΠΎΠ²Π°ΡΡΡΡ Π΄Π»Ρ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² Π²ΠΈΠ΄Π΅ ΡΠ°ΡΡΡΠΎΠ²ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ;
- ΠΠΎΠ»Π΅Π΅ Π±ΡΡΡΡΠ°Ρ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΠΊΠΎΠ½ΠΎΠΊ, Ρ.ΠΊ. ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΡΠ°Π·ΠΌΠ΅Ρ;
- ΠΠ°Π±ΠΎΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ Π²ΡΠ΅ΠΌΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ, ΠΈΠ·-Π·Π° ΡΠΎΠ³ΠΎ ΡΡΠΎ ΠΎΠ½ΠΈ ΠΏΠΎΡΡΠ°Π²Π»ΡΡΡΡΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΎΡΠΌΠ°ΡΠ°Ρ : eot, ttf, woff, svg ΠΈ Π΄Ρ. Π’.Π΅. Π΅ΡΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠ°, ΡΠΎ ΠΎΠ½ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ Π΄ΡΡΠ³ΠΎΠΉ;
- ΠΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π½Π°Π±ΠΎΡΠΎΠ² ΠΈΠΊΠΎΠ½ΠΎΠΊ (Font Awesome, Glyphicons ΠΈ Π΄Ρ.) ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ Π² ΡΠ²ΠΎΡΠΌ Π½Π°Π±ΠΎΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ SVG (Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ°), ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ ΠΎΡΠ΅Π½Ρ ΡΡΡΠΊΠΈΠΌΠΈ ΠΈ ΠΎΡΠ»ΠΈΡΠ½ΠΎ ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΡΡΡΡΡ.
ΠΠ½Π°ΡΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° ΠΎΠ±ΡΡΠ½ΠΎ Π½Π°Ρ ΠΎΠ΄ΡΡ ΡΠΈΡΠΎΠΊΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΠ°ΠΉΡΠ°, Ρ.Π΅. ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π΅Π³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ»ΠΈ Π±Π»ΠΎΠΊΠΎΠ².
ΠΠΎ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° ΠΊΡΠΎΠΌΠ΅ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ², ΠΈΠΌΠ΅ΡΡ Π΅ΡΡ ΠΈ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΈ:
- ΠΈΡ Π·Π°ΡΡΡΠ΄Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ, Π° Π½Π΅ ΠΏΡΠΎΡΡΠΎ Π·Π½Π°ΡΠΊΠ°ΠΌΠΈ;
- ΡΠ²Π΅Ρ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ ΠΎΠ΄Π½ΠΈΠΌ ΡΠ²Π΅ΡΠΎΠΌ.
ΠΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ° Π½Π΅Π²Π΅ΡΠΎΡΡΠ½ΠΎ ΠΏΡΠΎΡΡΡ Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ.
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ Ρ ΠΏΠ°ΠΊΠ΅ΡΠ°ΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ°:
-
Π‘ΠΊΠ°ΡΠ°ΡΡ Ρ ΡΠ°ΠΉΡΠ° ΠΏΠ°ΠΊΠ΅Ρ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π° ΡΠ²ΠΎΡΠΌ ΡΠ°ΠΉΡΠ΅. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π°ΡΠΈ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Font Awesome.
-
Π‘ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΡΠ°ΠΉΠ» CSS ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΠΌΡΠΉ Π²ΠΌΠ΅ΡΡΠ΅ Ρ ΠΏΠ°ΠΊΠ΅ΡΠΎΠΌ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ°. ΠΡΠ»ΠΈ ΠΎΡΠΊΡΡΡΡ Π΄Π°Π½Π½ΡΠΉ ΡΠ°ΠΉΠ», ΡΠΎ ΠΡ ΡΠ²ΠΈΠ΄Π΅ΡΠ΅, ΡΡΠΎ ΠΎΠ½ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡ
@font-face
, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠΎΠ΄Π³ΡΡΠΆΠ°Π΅Ρ ΡΡΠΈΡΡΡ ΠΈ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΈΡ Π½Π°ΡΡΡΠΎΠΉΠΊΡ. ΠΡΠΎΠΌΠ΅ ΡΡΠΎΠ³ΠΎ, ΡΡΠΎΡ ΡΠ°ΠΉΠ» ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° CSS, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ ΡΠΏΡΠΎΡΠ°Π΅ΡΡΡ ΡΠ°Π±ΠΎΡΠ° Ρ ΡΡΠΈΠΌ Π½Π°Π±ΠΎΡΠΎΠΌ ΡΡΠΈΡΡΠΎΠ².<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
- Π‘ΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ «fonts», ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ ΡΡΠΈΡΡΡ, Π² ΠΠ°ΡΡ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ Π½Π° ΡΠ°ΠΉΡΠ΅. ΠΡΠ»ΠΈ ΡΠΆΠ΅ Π΅ΡΡΡ ΡΠ°ΠΊΠ°Ρ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ, ΡΠΎ ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π° «fonts» Π² ΡΡΡ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ.
- Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠ°ΠΊΠ΅ΡΠ° ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅, Π·Π½Π°ΡΠΊΠΈ ΠΎΠ±ΡΡΠ½ΠΎ Π²ΡΡΠ°Π²Π»ΡΡΡΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π΄Π²ΡΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ²:
- Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ
ΠΊΠ»Π°ΡΡΠΎΠ² Π² Π°ΡΡΠΈΠ±ΡΡΠ΅
class
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°i
ΠΈΠ»ΠΈspan
.<!-- ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Font Awesome --> <span></span> <i></i>
-
Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΊΠ°Π·Π°Π½ΠΈΡ Π½ΠΎΠΌΠ΅ΡΠ° Π·Π½Π°ΡΠΊΠ° Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ data:
<!--Π¨ΡΠΈΡΡ Elegant Icon Font --> <!--ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΊΠ°Π·Π°Π½ΠΈΡ Π½ΠΎΠΌΠ΅ΡΠ° Π·Π½Π°ΡΠΊΠ° Π² Π°ΡΡΠΈΠ±ΡΡΠ΅ data --> <span data-icon="?"></span>
<!-- ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² 4 ΡΠ°Π·Π° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ»Π°ΡΡΠ° Font Awesome fa-4x --> <i></i> <!-- ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΡ ΠΏΡΠ°Π²ΠΈΠ» CSS --> <!-- Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ Π΅Ρ ΡΠ²Π΅Ρ --> <i></i>
ΠΠΎ ΡΡΠΈΠ»ΠΈ Π΄Π»Ρ ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΎΠ±ΡΡΠ½ΠΎ Π½Π΅ Π·Π°Π΄Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°ΡΡΠΈΠ±ΡΡΠ° style
, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΊΠ»Π°ΡΡΡ:
CSS: .large-green { font-size: 50px; color: green; } HTML: <i></i>
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ°.
-
ΠΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ :
<button><i></i> ΠΠ½ΠΎΠΏΠΊΠ°1</button> <button><i></i> ΠΠ½ΠΎΠΏΠΊΠ°2</button> <button><i></i> ΠΠ½ΠΎΠΏΠΊΠ°3</button> <button><i></i> ΠΠ½ΠΎΠΏΠΊΠ°4</button>
ΠΠ½ΠΎΠΏΠΊΠ°1 ΠΠ½ΠΎΠΏΠΊΠ°2 ΠΠ½ΠΎΠΏΠΊΠ°3 ΠΠ½ΠΎΠΏΠΊΠ°4
-
ΠΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΌΠ΅Π½Ρ:
-
ΠΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΡ Π²ΠΈΠ΄ΠΆΠ΅ΡΠ°Ρ :
-
ΠΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΠΊΠ½ΠΎΠΏΠΎΠΊ:
-
ΠΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΊΠ½ΠΎΠΏΠΊΠ°Ρ , Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°Π±ΠΎΡΠ° Ρ Π·Π°ΠΏΠΈΡΡΠΌΠΈ Π² ΡΠ°Π±Π»ΠΈΡΠ΅:
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠ΅ ΠΏΠ°ΠΊΠ΅ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ ΡΡΠΈΡΡΠ°.
Glyphicons
Font Awesome
Foundation Icon Fonts
Brandico
Elegant Icon Font
Themify Icons
Ionicons
Octicons
Open Iconic
Typicons
Stroke 7
Ligature symbols
Π Π°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΠΈ ΠΈΠΊΠΎΠ½ΠΎΠΊ
Font Awesome ΠΈ ΠΠ±ΡΠ΅Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΎΠ±ΡΠ΅Π΄ΠΎΡΡΡΠΏΠ½ΡΠΌΠΈ ΡΠ°ΠΌΠΎΠΌΡ
ΠΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π² Π²Π°ΡΠ΅ΠΌ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ΅, ΡΠΎ Π΄Π°Π½Π½ΡΠΉ ΠΌΠ°Π½ΡΠ°Π» ΠΏΠΎΠ΄ΡΠΊΠ°ΠΆΠ΅Ρ Π²Π°ΠΌ ΠΊΠ°ΠΊ ΠΏΠΎΠΌΠΎΡΡ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌ ΠΏΡΠΎΠΈΠ³Π½ΠΎΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ»ΠΈ Π»ΡΡΡΠ΅ ΠΏΠΎΠ½ΡΡΡ Font Awesome.
ΠΠΊΠΎΠ½ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π΄Π»Ρ Π΄Π΅ΠΊΠΎΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ»ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΡΡΠΈΠ»Ρ
ΠΡΠ»ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ Π΄Π΅ΠΊΠΎΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π±ΡΠ΅Π½Π΄Π°, ΡΠΎ ΠΎΠ½ΠΈ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΎΠ±ΡΡΠ²Π»Π΅Π½Ρ ΠΎΠ±ΡΠ΅Π΄ΠΎΡΡΡΠΏΠ½ΠΎ, ΡΠΊ
ΠΎΠ½ΠΈ Π²Π»ΠΈΡΡΡ Π½Π° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΡΠΈΡΠ°ΡΡΠΈΠ΅ ΡΠ°ΠΉΡΡ Π² ΡΠ»ΡΡ
. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΅ΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΡΡΠΎΠ±Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠ½ΡΡΡ
ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΠΈΠ»Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΡ, ΡΠΎ Π² ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅ΠΌ HTML ΠΎΠ½ΠΈ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΠΏΡΠΎΠ΄ΡΠ±Π»ΠΈΡΠΎΠ²Π°Π½Ρ Π² ΠΎΠΏΠΈΡΠ°Π½ΠΈΠΈ Π΄Π»Ρ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΡ
ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ
ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΌ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ Π² ΡΠΎΠΌ, ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π½Π΅ ΡΠΈΡΠ°Π΅ΡΡΡ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π΅ΠΌΡ Π°ΡΡΠΈΠ±ΡΡ aria-hidden="true"
.
<i aria-hidden="true"></i>
ΠΈΠΊΠΎΠ½ΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ Π΄Π΅ΠΊΠΎΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ<h2>
<i aria-hidden="true"></i>
Pied Piper, A Middle-Out Compression Solution Making Data Storage Problems Smaller
</h2>
ΠΈΠΊΠΎΠ½ΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ°ΠΊ Π»ΠΎΠ³ΠΎΡΠΈΠΏ<a href="https://github.com/FortAwesome/Font-Awesome"><i aria-hidden="true"></i> View this project's code on Github</a>
ΠΈΠΊΠΎΠ½ΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΊΡΡΠΎΠΌ ΡΡΡΠ»ΠΊΠΈΠΠΊΠΎΠ½ΠΊΠΈ Ρ ΡΠ΅ΠΌΠ°Π½ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΠΈΠ»ΠΈ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΠΎΠΉ ΡΠ΅Π»ΡΡ
ΠΡΠ»ΠΈ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ ΡΠΌΡΡΠ» (Π° Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π΄Π΅ΠΊΠΎΡΠ°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°), ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠ΅ΡΠ΅Π΄Π°Π΅ΡΡΡ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½ΡΠΌ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌ. ΠΡΠΎ ΠΊΠ°ΡΠ°Π΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΡΠΎΠΊΡΠ°ΡΠ°Π΅ΡΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ²ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ (ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠΎΡΠΌ, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»ΠΈ ΠΈ ΡΠ΄). ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² Π΄Π»Ρ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ ΡΡΠΎΠΉ Π·Π°Π΄Π°ΡΠΈ:
ΠΡΠ»ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠ° Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΈΠ½ΡΠ΅ΡΠ°ΠΊΡΠΈΠ²Π½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ
The simplest way to provide a text alternative is to use the aria-hidden="true"
attribute on the icon and to include the text with an additional element, such as a <span>
, with appropriate CSS to visually hide the element while keeping it accessible to assistive technologies. In addition, you can add a title
attribute on the icon to provide a tooltip for sighted mouse users.
<dl>
<dt>
<i aria-hidden="true" title="Time to destination by car"></i>
<span>Time to destination by car:</span>
</dt>
<dd>4 minutes</dd>
<dt>
<i aria-hidden="true" title="Time to destination by bike"></i>
<span>Time to destination by bike:</span>
</dt>
<dd>12 minutes</dd>
</dl>
an icon being used to communicate travel methods<i aria-hidden="true" title="60 minutes remain in your exam"></i>
<span>60 minutes remain in your exam</span>
<i aria-hidden="true" title="30 minutes remain in your exam"></i>
<span>30 minutes remain in your exam</span>
<i aria-hidden="true" title="0 minutes remain in your exam"></i>
<span>0 minutes remain in your exam</span>
an icon being used to denote time remainingIf an icon represents an interactive element
In the case of focusable interactive elements, there are various options to include an alternative text or label to the element, without the need for any visually hidden <span>
or similar. For instance, simply adding the aria-label
attribute with a text description to the interactive element itself will be sufficient to provide an accessible alternative name for the element. If you need to provide a visual tooltip on mouseover/focus, we recommend additionally using the title
attribute or a custom tooltip solution.
<a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart">
<i aria-hidden="true"></i>
</a>
an icon being used to communicate shopping cart state<a href="#navigation-main" aria-label="Skip to main navigation">
<i aria-hidden="true"></i>
</a>
an icon being used as a link to a navigation menu<a href="path/to/settings" aria-label="Delete">
<i aria-hidden="true" title="Delete this item?"></i>
</a>
an icon being used as a delete button’s symbol with a title
attribute to provide a native mouse tooltipΠ Π°Π±ΠΎΡΠ° ΡΠΎ ΡΡΠΈΡΡΠΎΠΌ Awesome
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ Font Awesome
ΠΠΊΠΎΠ½ΠΎΡΠ½ΡΠΉ ΡΡΠΈΡΡ Awesome — ΡΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ ΡΡΠΈΡΡ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π² ΡΠ΅Π±Π΅ Π² ΠΌΠ΅ΡΡΠΎ Π±ΡΠΊΠ² ΡΠΈΠΌΠ²ΠΎΠ»Ρ ΠΈ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΠ΅ Π·Π½Π°ΠΊΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π»Π΅Π³ΠΊΠΎ ΠΎΡΠΎΡΠΌΠ»ΡΡΡ ΡΠ΅ΡΠ΅Π· CSS ΠΏΠΎ ΡΠ°ΠΊΠΎΠΉ ΠΆΠ΅ Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ ΠΊΠ°ΠΊ Π΄Π΅Π»Π°Π΅ΠΌ ΠΌΡ ΡΡΠΎ Ρ ΠΏΡΠΎΡΡΡΠΌ ΡΡΠΈΡΡΠΎΠΌ. Π’ΠΎ Π΅ΡΡΡ, ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ CSS ΠΌΠΎΠΆΠ΅ΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΄Π»Ρ Π½ΠΈΡ ΡΠ²Π΅Ρ, ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ, Π·Π°Π΄Π°ΡΡ ΡΠ΅Π½Ρ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄ΡΡΠ³ΠΎΠ΅.
Π Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ Font Awesome Π²Π΅ΡΡΠΈΠΈ 4.7.0 ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΡΡ 646 ΠΈΠΊΠΎΠ½ΠΎΠΊ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠ΅ΠΌΠ°ΡΠΈΠΊ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ Π΄Π»Ρ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² ΡΠ°ΠΊ ΠΈ Π»ΠΈΡΠ½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΠΎ.
1. ΠΠ°ΠΊ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΡΡ ΡΡΠΈΡΡ Awesome
ΠΠΎΠΆΠ½ΠΎ Π²ΡΠ΄Π΅Π»ΠΈΡΡ Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π°, ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ ΡΠ΅ΡΡΡΡΠΎΠ² ΠΎΡ ΠΊΡΠ΄Π° Π±ΡΠ΄Π΅ΠΌ ΠΏΠΎΠ΄Π³ΡΡΠΆΠ°ΡΡ ΡΠ°ΠΉΠ» font-awesome.css ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°ΡΡ ΡΡΠΈΡΡΡ ΡΠ΅ΡΠ΅Π· CSS ΠΈΠ»ΠΈ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠΏΠΎΡΠΎΠ±, ΡΡΠΎ ΡΠΊΠ°ΡΠΈΠ²Π°Π΅ΠΌ ΠΊ ΡΠ΅Π±Π΅ Π°ΡΡ ΠΈΠ² Ρ ΡΡΠΈΡΡΠΎΠΌ Awesome ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π΅Π³ΠΎ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ΅Π³Π° <link>. ΠΠ°Π»Π΅Π΅Β Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎ ΡΠ°Π·Π±Π΅ΡΠ΅ΠΌ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· ΡΡΠΈΡ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ².
Π‘ΠΏΠΎΡΠΎΠ± 1
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΡΡΠΎΡΠΎΠ½Π½ΠΈΠ΅ ΡΠ΅ΡΠ²ΠΈΡΡ CDNJS ΠΈΠ»ΠΈ BootstrapCDN.Β Π Π°Π·ΠΌΠ΅ΡΠ΅Π½Π½ΡΠΉ Π½Π° Π½ΠΈΡ ΡΠ°ΠΉΠ» font-awesome.css ΠΌΡ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ Π΄Π°Π½Π½ΡΡ ΡΡΡΠΎΠΊ:
ΠΠ»Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Ρ CDNJS:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
ΠΠ»Ρ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ Ρ BootstrapCDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
ΠΡΠΎΡ ΠΊΠΎΠ΄ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² ΡΠ°Π·Π΄Π΅Π» <head> ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ΅Π½ΠΈΡ style.css. ΠΠΎΡΠ»Π΅ ΡΠΎΠ³ΠΎ ΠΊΠ°ΠΊ ΡΠ°ΠΉΠ» ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠΈΠ»ΠΈ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΡΡΡΠΏΠ°ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ΅ΡΡΡΡΠ΅.
Π‘ΠΏΠΎΡΠΎΠ± 2
ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ Π½Π° ΡΠ°ΠΉΡ Font Awesome, ΠΈ ΡΠΊΠ°ΡΠΈΠ²Π°Π΅ΠΌ Π°ΡΡ ΠΈΠ² ΡΠΎ ΡΡΠΈΡΡΠΎΠΌ. Π Π°ΡΠΏΠ°ΠΊΠΎΠ²Π°Π² Π°ΡΡ ΠΈΠ² ΠΌΡ ΡΠ²ΠΈΠ΄ΠΈΠΌΒ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΏΠ°ΠΏΠΎΠΊ.Β ΠΠ»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΡΠΈΡΡΠ°Β Π½Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΡΡΡΡ Π΄Π²Π΅ ΠΏΠ°ΠΏΠΊΠΈ ΡΡΠΎ css ΠΈ ΠΏΠ°ΠΏΠΊΠ° fonts. ΠΠ°ΠΊΠ°ΡΠΈΠ²Π°Π΅ΠΌ ΠΈΡ Π½Π° ΡΠ²ΠΎΠΉ ΡΠ΅ΡΠ²Π΅Ρ Π³Π΄Π΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΡΠ°ΠΉΡ, Π΅ΡΠ»ΠΈ Π΅ΡΡΡ ΠΏΠ°ΠΏΠΊΠΈ Ρ ΡΠ°ΠΊΠΈΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ, ΡΠΎ ΠΏΡΠΎΡΡΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΈΠ· Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. ΠΠ°ΡΠ΅ΠΌ ΠΏΠΎΠ΄ΠΊΠ»ΡΡΠ°Π΅ΠΌ ΡΠ°ΠΉΠ» font-awesome.css ΠΈΠ»ΠΈ font-awesome.min.css ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ΅Π³Π° <link>, ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΠΈΠ· ΠΏΠ°ΠΏΠΊΠΈ css Π½Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΏΠΎΠ»Π½ΡΡ Π²Π΅ΡΡΠΈΡ:
<link rel="stylesheet" href="http://Π²Π°Ρ_ΡΠ°ΠΉΡ/css/font-awesome.css">
ΠΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²Π΅ΡΡΠΈΡ:
<link rel="stylesheet" href="http://Π²Π°Ρ_ΡΠ°ΠΉΡ/css/font-awesome.min.css">
2. ΠΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ Font Awesome
ΠΠ° Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΄Π²ΡΠΌΡ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ, ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠΏΠΎΡΠΎΠ± ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΠΊΠ»Π°ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ ΡΠΊΠ°Π·Π°ΡΡ Π΅Π³ΠΎ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <i></i> ΠΈΠ»ΠΈ <span></span>, Π½ΠΎ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΠΊΠ»Π°ΡΡ fa ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
<i></i>
ΠΡΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ±, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ::before ΠΈ ::after, Π° ΡΠ°ΠΊ ΠΆΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° content Π΄Π»Ρ ΠΈΠΊΠΎΠ½ΠΊΠΈ. ΠΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌΒ font-family: FontAwesome ΠΈΠ½Π°ΡΠ΅ ΡΡΠΈΡΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π΅ Π±ΡΠ΄ΡΡ.
li:before { content: "\f07a"; /* Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΠΈΠΊΠΎΠ½ΠΊΡ ΠΊΠΎΡΠ·ΠΈΠ½Π° */ font-family: FontAwesome; color: #aaaaaa; margin-right: 10px; }
2.1. ΠΠ°ΠΊ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ
Π§ΡΠΎ Π±Ρ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π² css ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡΒ font-size ΠΈ Π·Π°Π΄Π°ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ. Π’Π°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΠΊΠ»Π°ΡΡΡ fa-lg (ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ Π½Π° 33%),Β fa-2x, fa-3x, fa-4x ΠΈΠ»ΠΈ fa-5x.
fa-lg | fa-2x | fa-3x | fa-4x | fa-5x |
<i></i> <i></i> <i></i> <i></i> <i></i>
2.2. ΠΠ°ΠΊ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈΠΊΠΎΠ½ΠΊΠΈ
ΠΠ»Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ»Π°ΡΡ fa-fw, Π·Π°Π΄Π°Π² Π΅Π³ΠΎ, ΠΌΡ ΡΠΈΠΊΡΠΈΡΡΠ΅ΠΌ ΡΠΈΡΠΈΠ½Ρ ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊ Π΄Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ ΡΠ°ΠΊ ΠΈ Π΄Π»Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠΏΠΈΡΠΊΠΎΠ².
<ul> <li><a href="#"><i></i> ΠΠ»Π°Π²Π½Π°Ρ</a></li> <li><a href="#"><i></i> ΠΠ°ΡΡΠ°</a></li> <li><a href="#"><i></i> ΠΠ°Π±ΠΈΠ½Π΅Ρ</a></li> <li><a href="#"><i></i> ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ</a></li> </ul>
2.3. ΠΠ°ΠΊ ΠΌΠ°ΡΠΊΠΈΡΠΎΠ²Π°ΡΡ ΡΠΏΠΈΡΠΊΠΈ LI ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌΠΈ
ΠΠ»Ρ Π·Π°ΠΌΠ΅Π½Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ ΠΌΠ°ΡΠΊΠ΅ΡΠΎΠ² Π² Π±Π»ΠΎΠΊΠ΅ <ul>…</ul> ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΊΠ»Π°ΡΡΡ fa-ul ΠΈ fa-li.
- ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ°
- ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ°
- ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ°
- ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ°
<ul> <li><i></i>ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ°</li> <li><i></i>ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ°</li> <li><i></i>ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ°</li> <li><i></i>ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠΏΠΈΡΠΊΠ°</li> </ul>
2.4. ΠΠ°Π²ΡΡΠΊΠΈ Π΄Π»Ρ ΡΠΈΡΠ°Ρ ΠΎΠ±ΡΠ°ΠΌΠ»Π΅Π½Π½ΡΠ΅ Π² ΡΠ°ΠΌΠΊΠ΅
Π§ΡΠΎ Π±Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ°ΠΌΠΊΡ Π΄Π»Ρ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌ ΠΊΠ»Π°ΡΡ fa-border, Π° ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ pull-right ΠΈ pull-left ΠΌΠΎΠΆΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²ΡΡ ΠΊΠ°Π²ΡΡΠΊΠΈ Π΄Π»Ρ ΡΠ΅ΠΊΡΡΠ°.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien.
<i></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec purus congue, posuere libero in, porta sapien. In sed elit lectus. Sed lacus elit, semper vitae felis id, sodales congue sapien. <i></i>
2.5. ΠΠ½ΠΈΠΌΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ
Π§ΡΠΎ Π±Ρ Π°Π½ΠΈΠΌΠΈΡΠΎΠ²Π°ΡΡ Π»ΡΠ±ΡΡ ΠΈΠΊΠΎΠ½ΠΊΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ»Π°ΡΡ fa-spin Π΄Π»Ρ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ ΠΈ Π΄Π»Ρ ΠΏΡΠ»ΡΡΠΈΡΡΡΡΠ΅ΠΉ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ fa-pulse. Π’Π°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡΡ fa-spinner, fa-refresh, ΠΈ fa-cog.
fa-spin fa-cog | fa-spin fa-spinner | fa-spin fa-refresh | fa-spin fa-circle-o-notch | fa-pulse fa-spinner |
<i></i> <i></i> <i></i> <i></i> <i></i>
2.6. ΠΠΎΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΎΡΠ·Π΅ΡΠΊΠ°Π»ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ
ΠΠ»Ρ ΠΏΠΎΠ²ΠΎΡΠΎΡΠ° ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΊΠ»Π°ΡΡ rotate-* Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΡΠΈΡΠ»ΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ Π½Π° ΠΊΠ°ΠΊΠΎΠΉ Π³ΡΠ°Π΄ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠ° Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²Π΅ΡΠ½ΡΡΠ°. ΠΠ»Ρ Π·Π΅ΡΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π²Π° ΠΊΠ»Π°ΡΡΠ° ΡΡΠΎ fa-flip-horizontal Π΄Π»ΡΒ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΡΠ·Π΅ΡΠΊΠ°Π»ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠ³ΠΎ icon-flip-vertical.
normal | fa-rotate-90 | fa-rotate-180 | fa-rotate-270 | fa-flip-horizontal | fa-flip-vertical |
<i></i> normal <i></i> fa-rotate-90 <i></i> fa-rotate-180 <i></i> fa-rotate-270 <i></i> fa-flip-horizontal <i></i> fa-flip-vertical
2.7. ΠΡΡΠΏΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ
ΠΠΊΠΎΠ½ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°ΡΡ Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°Ρ ΠΈΡ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π°, ΡΠ΅ΠΌ ΡΠ°ΠΌΡΠΌ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΡΡ ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠ±ΠΎΠΉ. Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π³ΡΡΠΏΠΏΡ ΠΈΠ· ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π·Π°Π΄Π°Π΅ΠΌ ΠΊΠ»Π°ΡΡ Π΄Π»Ρ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ fa-stack. ΠΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΠΊΠΎΠ½ΠΊΠΈ, ΠΊΠ»Π°ΡΡ fa-stack-1x Π·Π°Π΄Π°Π΅Ρ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, Π° ΠΊΠ»Π°ΡΡ fa-stack-2x Π΄Π»Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ. Π’Π°ΠΊ ΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΊΠ»Π°ΡΡΠΎΠ² fa-lg, fa-2x, fa-3x, fa-4x, ΠΈΠ»ΠΈ fa-5x.
fa-twitter Π½Π° fa-square-o | fa-flag Π½Π° fa-circle | fa-terminal Π½Π° fa-square | fa-ban Π½Π° fa-camera |
<span> <i></i> <i></i> </span> fa-twitter Π½Π° fa-square-o<br> <span> <i></i> <i></i> </span> fa-flag Π½Π° fa-circle<br> <span> <i></i> <i></i> </span> fa-terminal Π½Π° fa-square<br> <span> <i></i> <i></i> </span> fa-ban Π½Π° fa-camera
2.8. ΠΡΠΈΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² Bootstrap 3
ΠΠΊΠΎΠ½ΠΊΠΈ Awesome ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π² Bootstrap ΠΈ ΡΡΠΎ Ρ ΠΎΡΠΎΡΠΎ Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· Π΄Π°Π½Π½ΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠΎΠ².
<a href="#"> <i></i> Π£Π΄Π°Π»ΠΈΡΡ</a> <a href="#"> <i></i> ΠΠ°ΡΡΡΠΎΠΉΠΊΠΈ</a> <a href="#"> <i></i> Font Awesome<br>ΠΠ΅ΡΡΠΈΡ 4.7.0</a> <div> <a href="#"> <i title="Align Left"></i> </a> <a href="#"> <i title="Align Center"></i> </a> <a href="#"> <i title="Align Right"></i> </a> <a href="#"> <i title="Align Justify"></i> </a> </div> <div> <span><i></i></span> <input type="text" placeholder="ΠΠ°Ρ Email"> </div> <div> <span><i></i></span> <input type="password" placeholder="ΠΠ°ΡΠΎΠ»Ρ"> </div> <div> <a href="#"><i></i> ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ</a> <a data-toggle="dropdown" href="#"> <span title="Toggle dropdown menu"></span> </a> <ul> <li><a href="#"><i></i> Π Π΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ</a></li> <li><a href="#"><i></i> Π£Π΄Π°Π»ΠΈΡΡ</a></li> <li><a href="#"><i></i> ΠΠ°Π±Π°Π½ΠΈΡΡ</a></li> <li></li> <li><a href="#"><i></i> ΠΠ°ΡΡ ΠΏΡΠ°Π²Π° Π°Π΄ΠΌΠΈΠ½ΠΈΡΡΡΠ°ΡΠΎΡΠ°</a></li> </ul> </div>
3. ΠΡΡΠΏΠΏΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ
Π Π²Π΅ΡΡΠΈΠΈ Font Awesome 4.7 Π²ΠΊΠ»ΡΡΠ΅Π½Ρ Π½ΠΎΠ²ΡΠ΅ 41 ΠΈΠΊΠΎΠ½ΠΊΠ°. ΠΠΊΠΎΠ½ΠΊΠΈ ΡΠ°Π·Π±ΠΈΡΡ Π½Π° Π³ΡΡΠΏΠΏΡ Π΄Π»Ρ ΡΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ ΠΎΡΠ±ΠΎΡΠ° ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΏΠΎΠΈΡΠΊΠ° ΠΈΠ»ΠΈ ΠΏΠΎ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. Π£ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ ΠΊΠ»Π°ΡΡ ΠΈ CSS ΠΊΠΎΠ΄ Π΄Π»Ρ Π²ΡΡΠ°Π²ΠΊΠΈ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° content.
3.1. ΠΠΊΠΎΠ½ΠΊΠΈ Π΄Π»Ρ Π²Π΅Π±-ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ
fa-bath\f2cd
fa-id-card\f2c2
fa-id-card-o\f2c3
fa-envelope-open\f2b6
fa-envelope-open-o\f2b7
fa-id-badge\f2c1
fa-microchip\f2db
fa-podcast\f2ce
fa-shower\f2cc
fa-snowflake-o\f2dc
fa-thermometer-full\f2c7
fa-thermometer-empty\f2cb
fa-thermometer-quarter\f2ca
fa-thermometer-half\f2c9
fa-thermometer-three-quarters\f2c8
fa-thermometer-full\f2c7
fa-user-circle\f2bd
fa-user-circle-o\f2be
fa-user-o\f2c0
fa-window-close\f2d3
fa-window-close-o\f2d4
fa-window-maximize\f2d0
fa-window-restore\f2d2
fa-window-minimize\f2d
fa-address-book\f2b9
fa-address-book-o\f2ba
fa-address-card\f2bb
fa-address-card-o\f2bc
fa-adjust\f042
fa-anchor\f13d
fa-archive\f187
fa-arrows\f047
fa-asterisk\f069
fa-at\f1fa
fa-balance-scale\f24e
fa-ban\f05e
fa-bank\f19c
fa-barcode\f02a
fa-battery-empty\f244
fa-battery-half\f242
fa-battery-quarter\f243
fa-battery-three-quarters\f241
fa-battery-full\f240
fa-bed\f236
fa-beer\f0fc
fa-bell\f0f3
fa-bell-o\f0a2
fa-bell-slash\f1f6
fa-bell-slash-o\f1f7
fa-binoculars\f1e5
fa-birthday-cake\f1fd
fa-bolt\f0e7
fa-bomb\f1e2
fa-book\f02d
fa-bookmark\f02e
fa-bookmark-o\f097
fa-briefcase\f0b1
fa-bug\f188
fa-building\f1ad
fa-building-o\f0f7
fa-bullhorn\f0a1
fa-bullseye\f140
fa-calculator\f1ec
fa-calendar\f073
fa-calendar-check-o\f274
fa-calendar-minus-o\f272
fa-calendar-o\f133
fa-calendar-plus-o\f271
fa-calendar-times-o\f273
fa-cart-plus\f217
fa-cc\f20a
fa-certificate\f0a3
fa-clock-o\f017
fa-clone \f24d
fa-close\f00d
fa-cloud\f0c2
fa-cloud-download\f0ed
fa-cloud-upload\f0ee
fa-code\f121
fa-code-fork\f126
fa-coffee\f0f4
fa-comment\f075
fa-comment-o\f0e5
fa-commenting\f27a
fa-commenting-o\f27b
fa-comments\f086
fa-comments-o\f0e6
fa-compass\f14e
fa-copyright\f1f9
fa-creative-commons\f25e
fa-crop\f125
fa-crosshairs\f05b
fa-cube\f1b2
fa-cubes\f1b3
fa-cutlery\f0f5
fa-dashboard\f0e4
fa-database\f1c0
fa-desktop\f108
fa-diamond\f219
fa-download\f019
fa-edit\f044
fa-ellipsis-h\f141
fa-ellipsis-v\f142
fa-envelope\f0e0
fa-envelope-o\f003
fa-envelope-square\f199
fa-exclamation\f12a
fa-exclamation-circle\f06a
fa-exclamation-triangle\f071
fa-external-link\f08e
fa-external-link-square\f14c
fa-eye\f06e
fa-eye-slash\f070
fa-eyedropper\f1fb
fa-fax\f1ac
fa-film\f008
fa-filter\f0b0
fa-fire\f06d
fa-fire-extinguisher\f134
fa-flag\f024
fa-flag-checkered\f11e
fa-flag-o\f11d
fa-flash\f0e7
fa-flask\f0c3
fa-frown-o\f119
fa-futbol-o\f1e3
fa-gear\f013
fa-gears\f085
fa-gift\f06b
fa-glass\f000
fa-globe\f0ac
fa-graduation-cap\f19d
fa-group\f0c0
fa-hashtag\f292
fa-heart\f004
fa-heart-o\f08a
fa-heartbeat\f21e
fa-h-square\f0fd
fa-history\f1da
fa-home\f015
fa-hospital-o\f0f8
fa-hourglass\f254
fa-hourglass-start\f251
fa-hourglass-half\f252
fa-hourglass-end\f253
fa-hourglass-o\f250
fa-i-cursor\f246
fa-inbox\f01c
fa-industry\f275
fa-info\f129
fa-info-circle\f05a
fa-key\f084
fa-language\f1ab
fa-leaf\f06c
fa-legal\f0e3
fa-lemon-o\f094
fa-lightbulb-o\f0eb
fa-location-arrow\f124
fa-lock\f023
fa-magic\f0d0
fa-magnet\f076
fa-map\f279
fa-map-marker\f041
fa-map-o\f278
fa-map-pin\f276
fa-map-signs\f277
fa-medkit\f0fa
fa-meh-o\f11a
fa-microphone\f130
fa-microphone-slash\f131
fa-moon-o\f186
fa-mouse-pointer\f245
fa-music\f001
fa-navicon\f0c9
fa-newspaper-o\f1ea
fa-object-group\f247
fa-object-ungroup\f248
fa-paint-brush\f1fc
fa-paper-plane\f1d8
fa-paper-plane-o\f1d9
fa-paw\f1b0
fa-pencil\f040
fa-pencil-square\f14b
fa-pencil-square-o\f044
fa-percent\f295
fa-phone\f095
fa-phone-square\f098
fa-plug\f1e6
fa-power-off\xf011
fa-print\f02f
fa-puzzle-piece\f12e
fa-qrcode\f029
fa-question\f128
fa-question-circle\f059
fa-quote-left\f10d
fa-quote-right\f10e
fa-recycle\f1b8
fa-refresh\f021
fa-registered\f25d
fa-reply\f112
fa-reply-all\f122
fa-retweet\f079
fa-road\f018
fa-rss\f09e
fa-rss-square\f143
fa-search\f002
fa-search-minus\f010
fa-search-plus\f00e
fa-send\f1d8
fa-send-o\f1d9
fa-server\f233
fa-share\f064
fa-share-square\f14d
fa-share-square-o\f045
fa-shield\f132
fa-shopping-bag\f290
fa-shopping-basket\f291
fa-shopping-cart\f07a
fa-sign-in\f090
fa-sign-out\f08b
fa-signal\f012
fa-sitemap\f0e8
fa-sliders\xf1de
fa-smile-o\xf118
fa-soccer-ball-o\f1e3
fa-sort\f0dc
fa-sort-alpha-asc\f15d
fa-sort-alpha-desc\f15e
fa-sort-amount-asc\f160
fa-sort-amount-desc\f161
fa-sort-asc\f0de
fa-sort-desc\f0dd
fa-sort-numeric-asc\f162
fa-sort-numeric-desc\f163
fa-spoon\f1b1
fa-star\f005
fa-star-half\f089
fa-star-half-o\f123
fa-star-o\f006
fa-street-view\f21d
fa-suitcase\f0f2
fa-sun-o\f185
fa-support\f1cd
fa-tachometer\f0e4
fa-tag\f02b
fa-tags\f02c
fa-tasks\f0ae
fa-terminal\f120
fa-thumb-tack\f08d
fa-ticket\f145
fa-tint\f043
fa-trademark\f25c
fa-trash\f1f8
fa-trash-o\f014
fa-tree\f1bb
fa-trophy\f091
fa-tty\f1e4
fa-umbrella\f0e9
fa-unlock\f09c
fa-unlock-alt\f13e
fa-unsorted\f0dc
fa-upload\f093
fa-user\f007
fa-user-plus\xf234
fa-user-secret\f21b
fa-user-times\f235
fa-user-md\f0f0
fa-volume-down\f027
fa-volume-off\f026
fa-volume-up\f028
fa-warning\f071
fa-wifi\f1eb
fa-wrench\f0ad
3.2. ΠΠΊΠΎΠ½ΠΊΠΈ Π΄Π»Ρ Π»ΡΠ΄Π΅ΠΉ Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΠΌΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΠΌΠΈ
fa-american-sign-language-interpreting\f2a3
fa-assistive-listening-systems\f2a2
fa-audio-description\f29e
fa-blind\f29d
fa-braille\f2a1
fa-deaf\f2a4
fa-low-vision\f2a8
fa-question-circle-o\f29c
fa-sign-language\f2a7
fa-tty\f1e4
fa-universal-access\f29a
fa-volume-control-phone\f2a0
fa-wheelchair\f193
fa-wheelchair-alt\f29b
3.3. ΠΠΊΠΎΠ½ΠΊΠΈ ΡΡΠΊΠ°
fa-hand-grab-o\f255
fa-hand-lizard-o\f258
fa-hand-paper-o\f256
fa-hand-peace-o\f25b
fa-hand-pointer-o\f25a
fa-hand-scissors-o\f257
fa-hand-spock-o\xf259
fa-hand-o-down\f0a7
fa-hand-o-left\f0a5
fa-hand-o-right\f0a4
fa-hand-o-up\f0a6
fa-thumbs-down\f165
fa-thumbs-o-down\f088
fa-thumbs-o-up\f087
fa-thumbs-up\f164
fa-handshake-o\f2b5
3.4. ΠΠΊΠΎΠ½ΠΊΠΈ Π΄Π»Ρ ΡΠΎΡΠΌ
fa-check-square\f14a
fa-check-square-o\f046
fa-circle\f111
fa-circle-o\f10c
fa-dot-circle-o\f192
fa-minus-square\f146
fa-minus-square-o\f147
fa-plus-square\f0fe
fa-plus-square-o\f196
fa-square\f0c8
fa-square-o\f096
3.5. ΠΠΊΠΎΠ½ΠΊΠΈ Π΄Π»Ρ Π³Π°Π΄ΠΆΠ΅ΡΠΎΠ²
fa-mobile\f10b
fa-tablet\f10a
fa-television\f26c
fa-video-camera\f03d
fa-camera\f030
fa-camera-retro\f083
fa-hdd-o\f0a0
fa-headphones\f025
fa-laptop\f109
fa-gamepad\f11b
fa-keyboard-o\f11c
3.6. ΠΠΊΠΎΠ½ΠΊΠΈ ΡΡΠ°Π½ΡΠΏΠΎΡΡ
fa-ambulance\f0f9
fa-bicycle\f206
fa-bus\f207
fa-car\f1b9
fa-fighter-jet\f0fb
fa-motorcycle\f21c
fa-plane\f072
fa-rocket\f135
fa-ship\f21a
fa-space-shuttle\f197
fa-subway\f239
fa-taxi\f1ba
fa-train\f238
fa-truck\f0d1
fa-wheelchair\f193
fa-wheelchair-alt\f29b
3.7. ΠΠ΅Π½Π΄Π΅ΡΠ½ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ
fa-child\f1ae
fa-female\f182
fa-male\f183
fa-genderless\f1db
fa-transgender\f224
fa-transgender-alt\f225
fa-mars\f222
fa-mars-double\f227
fa-mars-stroke\f229
fa-mars-stroke-h\f22b
fa-mars-stroke-v\f22a
fa-mercury\f223
fa-neuter\f22c
fa-venus\f221
fa-venus-double\f226
fa-venus-mars\f228
3.8. Π€Π°ΠΉΠ»ΠΎΠ²ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ
fa-folder\f07b
fa-folder-o\f114
fa-folder-open\f07c
fa-folder-open-o\f115
fa-file\f15b
fa-file-o\f016
fa-file-archive-o\f1c6
fa-file-audio-o\f1c7
fa-file-code-o\f1c9
fa-file-excel-o\f1c3
fa-file-image-o\f1c5
fa-file-movie-o\f1c8
fa-file-pdf-o\f1c1
fa-file-photo-o\xf1c5
fa-file-powerpoint-o\f1c4
fa-file-sound-o\f1c7
fa-file-video-o\f1c8
fa-file-word-o\f1c2
fa-file-zip-o\f1c6
fa-file-text\f15c
fa-file-text-o\f0f6
fa-files-o\f0c5
fa-image\f03e
fa-sticky-note\f249
fa-sticky-note-o\f24a
3.9. ΠΠΊΠΎΠ½ΠΊΠΈ Π²Π°Π»ΡΡ
fa-btc\f15a
fa-usd\f155
fa-euro\f153
fa-gbp\f154
fa-yen\f157
fa-money\f0d6
fa-ruble\f158
fa-rupee\f156
fa-shekel\f20b
fa-turkish-lira\f195
fa-won\f159
fa-gg\f260
3.10. ΠΠΊΠΎΠ½ΠΊΠΈ ΡΠΏΡΠ°Π²Π»ΡΡΡΠΈΡ ΡΠΈΠΌΠ²ΠΎΠ»ΠΎΠ²
fa-check\f00c
fa-check-circle\f058
fa-check-circle-o\f05d
fa-circle-thin\f1db
fa-check-square\f14a
fa-check-square-o\f046
fa-circle\f111
fa-circle-o\f10c
fa-dot-circle-o\f192
fa-minus-square\f146
fa-minus-square-o\f147
fa-plus-square\f0fe
fa-plus-square-o\f196
fa-minus\f068
fa-minus-circle\f056
fa-square\f0c8
fa-square-o\f096
fa-plus\f067
fa-plus-circle\f055
fa-times-circle\f057
fa-times-circle-o\f05c
3.11. ΠΠΊΠΎΠ½ΠΊΠΈ ΠΏΠ»Π°ΡΠ΅ΠΆΠ½ΡΡ ΡΠΈΡΡΠ΅ΠΌ
fa-cc-amex\f1f3
fa-cc-diners-club\f24c
fa-cc-discover\f1f2
fa-cc-jcb\f24b
fa-cc-mastercard\f1f1
fa-cc-paypal\f1f4
fa-cc-stripe\f1f5
fa-cc-visa\f1f0
fa-credit-card\f09d
fa-credit-card-alt\f283
fa-google-wallet\f1ee
fa-paypal\f1ed
3.12. ΠΠΊΠΎΠ½ΠΊΠΈ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅ΠΉ ΠΈ ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²
fa-codepen\f1cb
fa-telegram\f2c6
fa-behance\f1b4
fa-behance-square\f1b5
fa-deviantart\f1bd
fa-whatsapp\f232
fa-digg\f1a6
fa-dribbble\f17d
fa-facebook\f09a
fa-facebook-official\f230
fa-facebook-square\f082
fa-google-plus\f0d5
fa-google-plus-square\f0d4
fa-jsfiddle\f1cc
fa-flickr\f16e
fa-instagram\f16d
fa-github\f09b
fa-github-alt\f113
fa-github-square\f092
fa-linkedin\f0e1
fa-linkedin-square\f08c
fa-odnoklassniki\f263
fa-odnoklassniki-square\f264
fa-pinterest\f0d2
fa-pinterest-p\f231
fa-pinterest-square\f0d3
fa-stack-overflow\f16c
fa-yelp\f1e9
fa-tumblr\f173
fa-tumblr-square\f174
fa-twitter\f099
fa-twitter-square\f081
fa-vk\f189
fa-youtube-square\f166
fa-youtube\f167
3.13. ΠΠΊΠΎΠ½ΠΊΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°
fa-align-center\f037
fa-align-justify\f039
fa-align-left\f036
fa-align-right\f038
fa-bold\f032
fa-chain\f0c1
fa-chain-broken\f127
fa-clipboard\f0ea
fa-columns\f0db
fa-copy\f0c5
fa-cut\f0c4
fa-dedent\f03b
fa-eraser\f12d
fa-floppy-o\f0c7
fa-font\f031
fa-header\f1dc
fa-indent\f03c
fa-italic\f033
fa-list\f03a
fa-list-alt\f022
fa-list-ol\f0cb
fa-list-ul\f0ca
fa-outdent\f03b
fa-paperclip\f0c6
fa-paragraph\f1dd
fa-paste\f0ea
fa-repeat\f01e
fa-rotate-left\f0e2
fa-rotate-right\f01e
fa-save\f0c7
fa-strikethrough\f0cc
fa-subscript\f12c
fa-superscript\f12b
fa-table\f0ce
fa-text-height\f034
fa-text-width\f035
fa-th\f00a
fa-th-large\f009
fa-th-list\f00b
fa-underline\f0cd
3.14. ΠΠΊΠΎΠ½ΠΊΠΈ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ
fa-level-down\f149
fa-level-up\f148
fa-angle-double-down\f103
fa-angle-double-left\f100
fa-angle-double-right\f101
fa-angle-double-up\f102
fa-angle-down\f107
fa-angle-left\f104
fa-angle-right\f105
fa-angle-up\f106
fa-arrow-circle-down\f0ab
fa-arrow-circle-left\f0a8
fa-arrow-circle-right\f0a9
fa-arrow-circle-up\f0aa
fa-arrow-circle-o-down\f01a
fa-arrow-circle-o-left\f190
fa-arrow-circle-o-right\f18e
fa-arrow-circle-o-up\f01b
fa-arrow-down\f063
fa-arrow-left\f060
fa-arrow-right\f061
fa-arrow-up\f062
fa-arrows-h\f07e
fa-arrows-v\f07d
fa-caret-down\f0d7
fa-caret-left\f0d9
fa-caret-right\f0da
fa-caret-up\f0d8
fa-caret-square-o-down\f150
fa-caret-square-o-left\f191
fa-caret-square-o-right\f152
fa-caret-square-o-up\f151
fa-cart-arrow-down\f218
fa-chevron-circle-down\f13a
fa-chevron-circle-left\f137
fa-chevron-circle-right\f138
fa-chevron-circle-up\f139
fa-chevron-down\f078
fa-chevron-left\f053
fa-chevron-right\f054
fa-chevron-up\f077
fa-exchange\f0ec
fa-long-arrow-down\f175
fa-long-arrow-left\f177
fa-long-arrow-right\f178
fa-long-arrow-up\f176
fa-toggle-down\f150
fa-toggle-left\f191
fa-toggle-right\f152
fa-toggle-up\f151
fa-toggle-off\f204
fa-toggle-on\f205
3.15. ΠΠΊΠΎΠ½ΠΊΠΈ Π²ΠΈΠ΄Π΅ΠΎ ΠΏΠ»Π΅Π΅ΡΠ°
fa-arrows-alt\f0b2
fa-backward\f04a
fa-forward\f04e
fa-compress\f066
fa-eject\f052
fa-expand\f065
fa-fast-backward\f049
fa-fast-forward\f050
fa-pause\f04c
fa-pause-circle\f28b
fa-pause-circle-o\f28c
fa-play\f04b
fa-play-circle\f144
fa-play-circle-o\f01d
fa-random\f074
fa-step-backward\f048
fa-step-forward\f051
fa-stop\f04d
fa-stop-circle\f28d
fa-stop-circle-o\f28e
fa-youtube-play\f16a
3.16. ΠΡΠ΅Π½Π΄ΠΎΠ²ΡΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ
fa-bandcamp\f2d5
fa-eercast\f2da
fa-etsy\f2d7
fa-free-code-camp\f2c5
fa-grav\f2d6
fa-imdb\f2d8
fa-linode\f2b8
fa-meetup\f2e0
fa-quora\f2c4
fa-ravelry\f2d9
fa-superpowers\f2dd
fa-wpexplorer\f2de
fa-500px\f26e
fa-adn\f170
fa-amazon\f270
fa-android\f17b
fa-angellist\f209
fa-apple\f179
fa-bitbucket\f171
fa-bitbucket-square\f172
fa-black-tie\f27e
fa-bluetooth\f293
fa-bluetooth-b\f294
fa-buysellads\f20d
fa-chrome\f268
fa-css3\f13c
fa-connectdevelop\f20e
fa-dashcube\f210
fa-delicious\f1a5
fa-dropbox\f16b
fa-drupal\f1a9
fa-edge\f282
fa-empire\f1d1
fa-expeditedssl\f23e
fa-firefox\f269
fa-fonticons\f280
fa-fort-awesome\f286
fa-forumbee\f211
fa-foursquare\f180
fa-ge\f1d1
fa-get-pocket\f265
fa-git\f1d3
fa-git-square\f1d2
fa-gg\f260
fa-gg-circle\f261
fa-google\f1a0
fa-gratipay\f184
fa-hacker-news\f1d4
fa-houzz\f27c
fa-html5\f13b
fa-ioxhost\f208
fa-joomla\f1aa
fa-lastfm\f202
fa-lastfm-square\f203
fa-leanpub\f212
fa-linux\f17c
fa-maxcdn\f136
fa-meanpath\f20c
fa-medium\f23a
fa-mixcloud\f289
fa-modx\f285
fa-opencart\f23d
fa-openid\f19b
fa-opera\f26a
fa-optin-monster\f23c
fa-pagelines\f18c
fa-pied-piper\f1a7
fa-pied-piper-alt\f1a8
fa-product-hunt\f288
fa-qq\f1d6
fa-rebel\f1d0
fa-reddit\f1a1
fa-reddit-square\f1a2
fa-renren\f18b
fa-safari\f267
fa-scribd\f28a
fa-sellsy\f213
fa-share-alt\f1e0
fa-share-alt-square\f1e1
fa-shirtsinbulk\f214
fa-simplybuilt\f215
fa-skyatlas\f216
fa-skype\f17e
fa-slack\f198
fa-slideshare\f1e7
fa-soundcloud\f1be
fa-spotify\f1bc
fa-stack-exchange\f18d
fa-steam\f1b6
fa-steam-square\f1b7
fa-stethoscope\f0f1
fa-stumbleupon\f1a4
fa-stumbleupon-circle\f1a3
fa-tencent-weibo\f1d5
fa-trello\f181
fa-tripadvisor\f262
fa-usb\f287
fa-viacoin\f237
fa-vimeo\f27d
fa-vimeo-square\f194
fa-vine\f1ca
fa-wechat\f1d7
fa-weibo\f18a
fa-wikipedia-w\f266
fa-windows\f17a
fa-wordpress \f19a
fa-xing\f168
fa-xing-square\f169
fa-y-combinator\f23b
fa-yahoo\f19e
3.17. ΠΠΊΠΎΠ½ΠΊΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ
fa-area-chart\f1fe
fa-bar-chart\f080
fa-line-chart\f201
fa-pie-chart\f200
3.18. ΠΡΠ°ΡΠ°ΡΡΠΈΠ΅ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ
fa-circle-o-notch\f1ce
fa-spinner\f110
fa-gear\f013
fa-spinner\f110
fa-refresh\f021
4. ΠΠΎΡ ΠΎΠΆΠΈΠ΅ ΡΠ΅ΡΡΡΡΡ
ΠΠΎ ΠΌΠΈΠΌΠΎ ΡΠ΅ΡΠ²ΠΈΡΠ° Font Awesome ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ΅ΡΡΡΡΡ, Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Ρ ΠΈΡ Π½ΠΈΠΆΠ΅.
4.1. IcoMoon
IcoMoon — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΡ ΡΡΠΈΡΡΠΎΠ². ΠΠ° Π΄Π°Π½Π½ΠΎΠΌ ΡΠ΅ΡΠ²ΠΈΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΎ ΡΡΠΈ ΠΏΠ°ΠΊΠ΅ΡΠ°, Π±ΠΎΠ»Π΅Π΅ Π΄Π΅ΡΠ°Π»ΡΠ½ΠΎ Ρ Π½ΠΈΠΌΠΈ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ ΡΡΡ. ΠΡ Π²ΡΠ±ΡΠ°Π½Π½ΠΎΠ³ΠΎ ΠΏΠ°ΠΊΠ΅ΡΠ° Π±ΡΠ΄Π΅Ρ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΡΠΎΡΠΌΠ°Ρ ΠΈ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ ΠΈΠΊΠΎΠ½ΠΎΠΊ. Π’Π°ΠΊ ΠΆΠ΅ IcoMoon ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΎΠ½Π»Π°ΠΉΠ½ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡΡ ΡΠ²Π΅Ρ, ΠΏΠΎΠ²ΠΎΡΠΎΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΡΡΠ³ΠΎΠ΅, Π½ΠΎ ΡΠ°ΠΌΡΠΉ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΏΠ»ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ΄Π΅Π»ΠΈΡΡ Π² ΡΠΎΠΌ ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΠΌΠΏΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠ΅ ΡΡΠΈΡΡΡ.
4.2. Material icons
Material icons — ΡΠ΅ΡΠ²ΠΈΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΠ»ΠΎΡΠΊΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΎΡ Google. ΠΠΊΠΎΠ½ΠΊΠΈ ΠΊΡΠ°ΡΠΈΠ²ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° Π²ΡΠ΅Ρ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ°Ρ ΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π° Π»ΡΠ±ΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΉ ΡΠΊΡΠ°Π½Π°.
ΠΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π² ΡΠ΅Π±Π΅ Π±ΠΎΠ»Π΅Π΅ 750 ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ Π»Π΅Π³ΠΊΠΎ Π²Π½Π΅Π΄ΡΡΠ΅ΡΡΡ Π½Π° ΡΠ°ΠΉΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΡΠ΅Π³Π° link, Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΠΉ ΡΡΠΈΡΡ Material Icons.
Π‘Π°ΠΌΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ i Ρ ΠΊΠ»Π°ΡΡΠΎΠΌ material-icons ΠΈΠ»ΠΈ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ html ΠΊΠΎΠ΄Π° ΠΈΠΊΠΎΠ½ΠΊΠΈ.
4.3. Fontello
ΠΠ° ΡΠ΅ΡΠ²ΠΈΡΠ΅ Fontello ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ Π±ΠΎΠ»ΡΡΠΎΠΉ Π²ΡΠ±ΠΎΡ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΡ ΡΡΠΈΡΡΠΎΠ². Π’Π°ΠΊΠΆΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π° Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΎΡΠ±ΠΎΡΠ° ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ° ΠΈΡ Π½Π° ΡΠ²ΠΎΠΉ ΠΊΠΎΠΌΠΏΡΡΡΠ΅Ρ.
4.4. Foundation Icon
Foundation Icon — ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½Π°Ρ ΠΊΠΎΠ»Π»Π΅ΠΊΡΠΈΡ ΠΈΠΊΠΎΠ½ΠΎΡΠ½ΡΡ ΡΡΠΈΡΡΠΎΠ² ΠΎΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Foundation. Π£Π½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΡΡΡ ΠΈΡ Π² ΡΠΎΠΌ ΡΡΠΎ ΡΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΠΏΠΎ ΠΌΠΈΠΌΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΡ ΠΈΠΊΠΎΠ½ΠΎΠΊ Π΅ΡΡΡ ΠΊΡΡΠ³Π»ΡΠ΅, ΡΠ°ΠΊ ΠΆΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π±ΡΠ΅Π½Π΄ΠΎΠ² ΠΈ ΡΠΎΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ΅ΠΉ.