5 février 2016

Icones caractères unicodes

Quand il s’agit d’intégrer des icones à sa page web on peut avoir recours à des images ou encore des typos (ex: Font Awesome). Mais parfois il peut aussi être utile et bien plus rapide à charger d’utiliser les caractères unicodes disponibles nativement sur tout système…

Comment utiliser ces caractères ?

  • HTML, PHP, Javascript on fait un simple copier/coller directement du caractère (colonne preview)
  • En CSS, via les pseudos-éléments ::before ::after,on prendra par contre le code
  • Ca se comporte comme un caractère, on pourra donc aussi fixer la taille de police, sa couleur, l’ombrage, …

Sélection de caractères unicodes intéressants

Il en existe un paquet, consulter cette page (passer de la présentation tableau au mode liste pour voir le code).

Icones

NamePreviewCode
Smiley☺
Hot Springs♨
8-Ball➑
White Star☆
Black Star★
White Heart♡
Black Heart❤
Airplane✈
Black Scissors✂
White Scissors✄
Crown♕
Cross✝
Black-White Circle◑
Eight Note♪
Beamed Eighth Notes♫
Four Balloon-Spoked Asterisk✣
Circled White Star✪
White Star✰
White Four Pointed Star✧
Black Four Pointed Star✦
Ballot Box Check☑
Check Mark✔
Cross Mark✘
Pencil✎
Writing Hand✍
Female♀
Male♂
Black Telephone☎
White Telephone☏
Envelope✉
Telephone Location✆

Icones en forme de flèches

NamePreviewCode
Leftwards Arrow←
Rightwards Arrow→
Upwards Arrow↑
Downwards Arrow↓
Left Right Arrow↔
Up Down Arrow↕
Right And Left Arrows⇄
Up And Down Arrows⇅
Down-Left 90deg Arrow↲
Down-Right 90deg Arrow↳
Up-Right 90deg Arrow↱
Leftwards Arrow To Bar⇤
Anticlockwise Semicircle Arrow↶
Clockwise Semicircle Arrow↷
Anticlockwise Circle Arrow↺
Clockwise Circle Arrow↻
Wide-Headed Rightwards Arrow➔
Downwards Zigzag Arrow↯
North West Arrow↖
Heavy South East Arrow➘
Heavy Rightwards Arrow➙
Heavy North East Arrow➚
Dashed Rightwards Arrow➟
Dotted Leftwards Arrow⇠
Black Rightwards Arrowhead➤
Leftwards White Arrow⇦
Rightwards White Arrow⇨
Left Angle Quotation Mark««
Right Angle Quotation Mark»»
Right Black Pointer►
Left Black Pointer◀
Up Black Pointer▲
Right White Pointer▷
Left White Pointer◁
Up White Pointer△

Special

NamePreviewCode
Numero№
Copyright©©
Registered®®
Trademark™
Estimated℮
Bullet•
Middle Dot··

Monnaies et devises

NamePreviewCode
Euro€
Pound££
Lira₤
Yen¥¥
Cent¢¢
Currency¤¤

Icones météo

NamePreviewCode
Degree°°
Small Sun☀
Big Sun☼
Cloud☁
Snowflake 1❆
Snowflake 2❅
Snowflake 3❄

Pointeurs

NamePreviewCode
Pointer Left Black☚
Pointer Right Black☛
Pointer Left White☜
Pointer Up White☝
Pointer Right White☞
Pointer Down White☟

Jeu de cartes

NamePreviewCode
Spades Black♠
Hearts Black♥
Diamonds Black♦
Clubs Black♣
Spades White♤
Hearts White♡
Diamonds White♢
Clubs White♧

Jeu d’échec

NamePreviewCode
King White♔
Queen White♕
Rook White♖
Bishop White♗
Knight White♘
Pawn White♙
King Black♚
Queen Black♛
Rook Black♜
Bishop Black♝
Knight Black♞
Pawn Black♟

Maths

NamePreviewCode
Infinity∞
Plus Minus±±
Less-Than Or Equal To≤
More-Than Or Equal To≥
Not Equal To≠
Division÷÷
Multiplication x××
Heavy Multiplication x✖
Superscript One¹¹
Superscript Two²²
Superscript Three³³
Circled Plus⊕
Circled Multiplication⊗
Logical AND∧
Logical OR∨
Delta∆
Pie∏
Sigma (SUM)∑
OmegaΩΩ
Empty Set∅
Angle∠
Parallel∥
Perpendicular⊥
Almost Equal To≈
Triangle△
Circle○
Square□

Fractions

NamePreviewCode
One Quarter (1/4)¼¼
One Half (1/2)½½
Three Quarters (3/4)¾¾
One Third (1/3)⅓
Two Thirds (2/3)⅔
One Eight (1/8)⅛
Three Eights (3/8)⅜
Five Eights (5/8)⅝
Seven Eights (7/8)⅞

Chiffres romains

NamePreviewCode
Roman Numeral OneⅠ
Roman Numeral TwoⅡ
Roman Numeral ThreeⅢ
Roman Numeral FourⅣ
Roman Numeral FiveⅤ
Roman Numeral SixⅥ
Roman Numeral SevenⅦ
Roman Numeral EightⅧ
Roman Numeral NineⅨ
Roman Numeral TenⅩ
Roman Numeral ElevenⅪ
Roman Numeral TwelveⅫ

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *