CSS http://drupal8.ovh/en/tags/css en HTML Unicode symbols (From U+2600) http://drupal8.ovh/en/tutoriels/266/html-unicode-symbols-from-u-2600 <span class="field field--name-title field--type-string field--label-hidden">HTML Unicode symbols (From U+2600)</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Thu, 11/24/2016 - 13:57</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><h2>HTML Unicode symbols From : 2000 To:2BFF</h2> <p style="font-size:2em;"><code>2010 ‐ ‑ ‒ – — ― ‖ ‗ ‘ ’ ‚ ‛ “ ” „ ‟<br /> 2020 † ‡ • ‣ ․ ‥ … ‧<br /> 2030 ‰ ‱ ′ ″ ‴ ‵ ‶ ‷ ‸ ‹ › ※ ‼ ‽ ‾ ‿<br /> 2040 ⁀ ⁁ ⁂ ⁃ ⁄ ⁅ ⁆<br /> 2050 ⁐ ⁑ ⁒ ⁓ ⁔ ⁕ ⁖ ⁗ ⁘ ⁙ ⁚ ⁛ ⁜ ⁝ ⁞<br /> 2070 ⁰ ⁱ ⁲ ⁳ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁺ ⁻ ⁼ ⁽ ⁾ ⁿ<br /> 2080 ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉ ₊ ₋ ₌ ₍ ₎ ₏<br /> 2090 ₐ ₑ ₒ ₓ ₔ ₕ ₖ ₗ ₘ ₙ ₚ ₛ ₜ ₝ ₞ ₟<br /> 20A0 ₠ ₡ ₢ ₣ ₤ ₥ ₦ ₧ ₨ ₩ ₪ ₫ € ₭ ₮ ₯<br /> 20B0 ₰ ₱ ₲ ₳ ₴ ₵ ₶ ₷ ₸ ₹ ₺ ₻ ₼ ₽ ₾ ₿<br /> 20C0 ⃀ ⃁ ⃂ ⃃ ⃄ ⃅ ⃆ ⃇ ⃈ ⃉ ⃊ ⃋ ⃌ ⃍ ⃎ ⃏<br /> 20D0 ⃐ ⃑ ⃒ ⃓ ⃔ ⃕ ⃖ ⃗ ⃘ ⃙ ⃚ ⃛ ⃜ ⃝ ⃞ ⃟<br /> 20E0 ⃠ ⃡ ⃢ ⃣ ⃤ ⃥ ⃦ ⃧ ⃨ ⃩ ⃪ ⃫ ⃬ ⃭ ⃮ ⃯<br /> 20F0 ⃰ ⃱ ⃲ ⃳ ⃴ ⃵ ⃶ ⃷ ⃸ ⃹ ⃺ ⃻ ⃼ ⃽ ⃾ ⃿<br /> 2100 ℀ ℁ ℂ ℃ ℄ ℅ ℆ ℇ ℈ ℉ ℊ ℋ ℌ ℍ ℎ ℏ<br /> 2110 ℐ ℑ ℒ ℓ ℔ ℕ № ℗ ℘ ℙ ℚ ℛ ℜ ℝ ℞ ℟<br /> 2120 ℠ ℡ ™ ℣ ℤ ℥ Ω ℧ ℨ ℩ K Å ℬ ℭ ℮ ℯ<br /> 2130 ℰ ℱ Ⅎ ℳ ℴ ℵ ℶ ℷ ℸ ℹ ℺ ℻ ℼ ℽ ℾ ℿ<br /> 2140 ⅀ ⅁ ⅂ ⅃ ⅄ ⅅ ⅆ ⅇ ⅈ ⅉ ⅊ ⅋ ⅌ ⅍ ⅎ ⅏<br /> 2150 ⅐ ⅑ ⅒ ⅓ ⅔ ⅕ ⅖ ⅗ ⅘ ⅙ ⅚ ⅛ ⅜ ⅝ ⅞ ⅟<br /> 2160 Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ Ⅺ Ⅻ Ⅼ Ⅽ Ⅾ Ⅿ<br /> 2170 ⅰ ⅱ ⅲ ⅳ ⅴ ⅵ ⅶ ⅷ ⅸ ⅹ ⅺ ⅻ ⅼ ⅽ ⅾ ⅿ<br /> 2180 ↀ ↁ ↂ Ↄ ↄ ↅ ↆ ↇ ↈ ↉ ↊ ↋ ↌ ↍ ↎ ↏<br /> 2190 ← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙ ↚ ↛ ↜ ↝ ↞ ↟<br /> 21A0 ↠ ↡ ↢ ↣ ↤ ↥ ↦ ↧ ↨ ↩ ↪ ↫ ↬ ↭ ↮ ↯<br /> 21B0 ↰ ↱ ↲ ↳ ↴ ↵ ↶ ↷ ↸ ↹ ↺ ↻ ↼ ↽ ↾ ↿<br /> 21C0 ⇀ ⇁ ⇂ ⇃ ⇄ ⇅ ⇆ ⇇ ⇈ ⇉ ⇊ ⇋ ⇌ ⇍ ⇎ ⇏<br /> 21D0 ⇐ ⇑ ⇒ ⇓ ⇔ ⇕ ⇖ ⇗ ⇘ ⇙ ⇚ ⇛ ⇜ ⇝ ⇞ ⇟<br /> 21E0 ⇠ ⇡ ⇢ ⇣ ⇤ ⇥ ⇦ ⇧ ⇨ ⇩ ⇪ ⇫ ⇬ ⇭ ⇮ ⇯<br /> 21F0 ⇰ ⇱ ⇲ ⇳ ⇴ ⇵ ⇶ ⇷ ⇸ ⇹ ⇺ ⇻ ⇼ ⇽ ⇾ ⇿<br /> 2200 ∀ ∁ ∂ ∃ ∄ ∅ ∆ ∇ ∈ ∉ ∊ ∋ ∌ ∍ ∎ ∏<br /> 2210 ∐ ∑ − ∓ ∔ ∕ ∖ ∗ ∘ ∙ √ ∛ ∜ ∝ ∞ ∟<br /> 2220 ∠ ∡ ∢ ∣ ∤ ∥ ∦ ∧ ∨ ∩ ∪ ∫ ∬ ∭ ∮ ∯<br /> 2230 ∰ ∱ ∲ ∳ ∴ ∵ ∶ ∷ ∸ ∹ ∺ ∻ ∼ ∽ ∾ ∿<br /> 2240 ≀ ≁ ≂ ≃ ≄ ≅ ≆ ≇ ≈ ≉ ≊ ≋ ≌ ≍ ≎ ≏<br /> 2250 ≐ ≑ ≒ ≓ ≔ ≕ ≖ ≗ ≘ ≙ ≚ ≛ ≜ ≝ ≞ ≟<br /> 2260 ≠ ≡ ≢ ≣ ≤ ≥ ≦ ≧ ≨ ≩ ≪ ≫ ≬ ≭ ≮ ≯<br /> 2270 ≰ ≱ ≲ ≳ ≴ ≵ ≶ ≷ ≸ ≹ ≺ ≻ ≼ ≽ ≾ ≿<br /> 2280 ⊀ ⊁ ⊂ ⊃ ⊄ ⊅ ⊆ ⊇ ⊈ ⊉ ⊊ ⊋ ⊌ ⊍ ⊎ ⊏<br /> 2290 ⊐ ⊑ ⊒ ⊓ ⊔ ⊕ ⊖ ⊗ ⊘ ⊙ ⊚ ⊛ ⊜ ⊝ ⊞ ⊟<br /> 22A0 ⊠ ⊡ ⊢ ⊣ ⊤ ⊥ ⊦ ⊧ ⊨ ⊩ ⊪ ⊫ ⊬ ⊭ ⊮ ⊯<br /> 22B0 ⊰ ⊱ ⊲ ⊳ ⊴ ⊵ ⊶ ⊷ ⊸ ⊹ ⊺ ⊻ ⊼ ⊽ ⊾ ⊿<br /> 22C0 ⋀ ⋁ ⋂ ⋃ ⋄ ⋅ ⋆ ⋇ ⋈ ⋉ ⋊ ⋋ ⋌ ⋍ ⋎ ⋏<br /> 22D0 ⋐ ⋑ ⋒ ⋓ ⋔ ⋕ ⋖ ⋗ ⋘ ⋙ ⋚ ⋛ ⋜ ⋝ ⋞ ⋟<br /> 22E0 ⋠ ⋡ ⋢ ⋣ ⋤ ⋥ ⋦ ⋧ ⋨ ⋩ ⋪ ⋫ ⋬ ⋭ ⋮ ⋯<br /> 22F0 ⋰ ⋱ ⋲ ⋳ ⋴ ⋵ ⋶ ⋷ ⋸ ⋹ ⋺ ⋻ ⋼ ⋽ ⋾ ⋿<br /> 2300 ⌀ ⌁ ⌂ ⌃ ⌄ ⌅ ⌆ ⌇ ⌈ ⌉ ⌊ ⌋ ⌌ ⌍ ⌎ ⌏<br /> 2310 ⌐ ⌑ ⌒ ⌓ ⌔ ⌕ ⌖ ⌗ ⌘ ⌙ ⌚ ⌛ ⌜ ⌝ ⌞ ⌟<br /> 2320 ⌠ ⌡ ⌢ ⌣ ⌤ ⌥ ⌦ ⌧ ⌨ 〈 〉 ⌫ ⌬ ⌭ ⌮ ⌯<br /> 2330 ⌰ ⌱ ⌲ ⌳ ⌴ ⌵ ⌶ ⌷ ⌸ ⌹ ⌺ ⌻ ⌼ ⌽ ⌾ ⌿<br /> 2340 ⍀ ⍁ ⍂ ⍃ ⍄ ⍅ ⍆ ⍇ ⍈ ⍉ ⍊ ⍋ ⍌ ⍍ ⍎ ⍏<br /> 2350 ⍐ ⍑ ⍒ ⍓ ⍔ ⍕ ⍖ ⍗ ⍘ ⍙ ⍚ ⍛ ⍜ ⍝ ⍞ ⍟<br /> 2360 ⍠ ⍡ ⍢ ⍣ ⍤ ⍥ ⍦ ⍧ ⍨ ⍩ ⍪ ⍫ ⍬ ⍭ ⍮ ⍯<br /> 2370 ⍰ ⍱ ⍲ ⍳ ⍴ ⍵ ⍶ ⍷ ⍸ ⍹ ⍺ ⍻ ⍼ ⍽ ⍾ ⍿<br /> 2380 ⎀ ⎁ ⎂ ⎃ ⎄ ⎅ ⎆ ⎇ ⎈ ⎉ ⎊ ⎋ ⎌ ⎍ ⎎ ⎏<br /> 2390 ⎐ ⎑ ⎒ ⎓ ⎔ ⎕ ⎖ ⎗ ⎘ ⎙ ⎚ ⎛ ⎜ ⎝ ⎞ ⎟<br /> 23A0 ⎠ ⎡ ⎢ ⎣ ⎤ ⎥ ⎦ ⎧ ⎨ ⎩ ⎪ ⎫ ⎬ ⎭ ⎮ ⎯<br /> 23B0 ⎰ ⎱ ⎲ ⎳ ⎴ ⎵ ⎶ ⎷ ⎸ ⎹ ⎺ ⎻ ⎼ ⎽ ⎾ ⎿<br /> 23C0 ⏀ ⏁ ⏂ ⏃ ⏄ ⏅ ⏆ ⏇ ⏈ ⏉ ⏊ ⏋ ⏌ ⏍ ⏎ ⏏<br /> 23D0 ⏐ ⏑ ⏒ ⏓ ⏔ ⏕ ⏖ ⏗ ⏘ ⏙ ⏚ ⏛ ⏜ ⏝ ⏞ ⏟<br /> 23E0 ⏠ ⏡ ⏢ ⏣ ⏤ ⏥ ⏦ ⏧ ⏨ ⏩ ⏪ ⏫ ⏬ ⏭ ⏮ ⏯<br /> 23F0 ⏰ ⏱ ⏲ ⏳ ⏴ ⏵ ⏶ ⏷ ⏸ ⏹ ⏺ ⏻ ⏼ ⏽ ⏾ ⏿<br /> 2400 ␀ ␁ ␂ ␃ ␄ ␅ ␆ ␇ ␈ ␉ ␊ ␋ ␌ ␍ ␎ ␏<br /> 2410 ␐ ␑ ␒ ␓ ␔ ␕ ␖ ␗ ␘ ␙ ␚ ␛ ␜ ␝ ␞ ␟<br /> 2420 ␠ ␡ ␢ ␣ ␤ ␥ ␦ ␧ ␨ ␩ ␪ ␫ ␬ ␭ ␮ ␯<br /> 2430 ␰ ␱ ␲ ␳ ␴ ␵ ␶ ␷ ␸ ␹ ␺ ␻ ␼ ␽ ␾ ␿<br /> 2440 ⑀ ⑁ ⑂ ⑃ ⑄ ⑅ ⑆ ⑇ ⑈ ⑉ ⑊ ⑋ ⑌ ⑍ ⑎ ⑏<br /> 2450 ⑐ ⑑ ⑒ ⑓ ⑔ ⑕ ⑖ ⑗ ⑘ ⑙ ⑚ ⑛ ⑜ ⑝ ⑞ ⑟<br /> 2460 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯<br /> 2470 ⑰ ⑱ ⑲ ⑳ ⑴ ⑵ ⑶ ⑷ ⑸ ⑹ ⑺ ⑻ ⑼ ⑽ ⑾ ⑿<br /> 2480 ⒀ ⒁ ⒂ ⒃ ⒄ ⒅ ⒆ ⒇ ⒈ ⒉ ⒊ ⒋ ⒌ ⒍ ⒎ ⒏<br /> 2490 ⒐ ⒑ ⒒ ⒓ ⒔ ⒕ ⒖ ⒗ ⒘ ⒙ ⒚ ⒛ ⒜ ⒝ ⒞ ⒟<br /> 24A0 ⒠ ⒡ ⒢ ⒣ ⒤ ⒥ ⒦ ⒧ ⒨ ⒩ ⒪ ⒫ ⒬ ⒭ ⒮ ⒯<br /> 24B0 ⒰ ⒱ ⒲ ⒳ ⒴ ⒵ Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ<br /> 24C0 Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ<br /> 24D0 ⓐ ⓑ ⓒ ⓓ ⓔ ⓕ ⓖ ⓗ ⓘ ⓙ ⓚ ⓛ ⓜ ⓝ ⓞ ⓟ<br /> 24E0 ⓠ ⓡ ⓢ ⓣ ⓤ ⓥ ⓦ ⓧ ⓨ ⓩ ⓪ ⓫ ⓬ ⓭ ⓮ ⓯<br /> 24F0 ⓰ ⓱ ⓲ ⓳ ⓴ ⓵ ⓶ ⓷ ⓸ ⓹ ⓺ ⓻ ⓼ ⓽ ⓾ ⓿<br /> 2500 ─ ━ │ ┃ ┄ ┅ ┆ ┇ ┈ ┉ ┊ ┋ ┌ ┍ ┎ ┏<br /> 2510 ┐ ┑ ┒ ┓ └ ┕ ┖ ┗ ┘ ┙ ┚ ┛ ├ ┝ ┞ ┟<br /> 2520 ┠ ┡ ┢ ┣ ┤ ┥ ┦ ┧ ┨ ┩ ┪ ┫ ┬ ┭ ┮ ┯<br /> 2530 ┰ ┱ ┲ ┳ ┴ ┵ ┶ ┷ ┸ ┹ ┺ ┻ ┼ ┽ ┾ ┿<br /> 2540 ╀ ╁ ╂ ╃ ╄ ╅ ╆ ╇ ╈ ╉ ╊ ╋ ╌ ╍ ╎ ╏<br /> 2550 ═ ║ ╒ ╓ ╔ ╕ ╖ ╗ ╘ ╙ ╚ ╛ ╜ ╝ ╞ ╟<br /> 2560 ╠ ╡ ╢ ╣ ╤ ╥ ╦ ╧ ╨ ╩ ╪ ╫ ╬ ╭ ╮ ╯<br /> 2570 ╰ ╱ ╲ ╳ ╴ ╵ ╶ ╷ ╸ ╹ ╺ ╻ ╼ ╽ ╾ ╿<br /> 2580 ▀ ▁ ▂ ▃ ▄ ▅ ▆ ▇ █ ▉ ▊ ▋ ▌ ▍ ▎ ▏<br /> 2590 ▐ ░ ▒ ▓ ▔ ▕ ▖ ▗ ▘ ▙ ▚ ▛ ▜ ▝ ▞ ▟<br /> 25A0 ■ □ ▢ ▣ ▤ ▥ ▦ ▧ ▨ ▩ ▪ ▫ ▬ ▭ ▮ ▯<br /> 25B0 ▰ ▱ ▲ △ ▴ ▵ ▶ ▷ ▸ ▹ ► ▻ ▼ ▽ ▾ ▿<br /> 25C0 ◀ ◁ ◂ ◃ ◄ ◅ ◆ ◇ ◈ ◉ ◊ ○ ◌ ◍ ◎ ●<br /> 25D0 ◐ ◑ ◒ ◓ ◔ ◕ ◖ ◗ ◘ ◙ ◚ ◛ ◜ ◝ ◞ ◟<br /> 25E0 ◠ ◡ ◢ ◣ ◤ ◥ ◦ ◧ ◨ ◩ ◪ ◫ ◬ ◭ ◮ ◯<br /> 25F0 ◰ ◱ ◲ ◳ ◴ ◵ ◶ ◷ ◸ ◹ ◺ ◻ ◼ ◽ ◾ ◿<br /><br /><br /> 2600 ☀ ☁ ☂ ☃ ☄ ★ ☆ ☇ ☈ ☉ ☊ ☋ ☌ ☍ ☎ ☏<br /> 2610 ☐ ☑ ☒ ☓ ☔ ☕ ☖ ☗ ☘ ☙ ☚ ☛ ☜ ☝ ☞ ☟<br /> 2620 ☠ ☡ ☢ ☣ ☤ ☥ ☦ ☧ ☨ ☩ ☪ ☫ ☬ ☭ ☮ ☯<br /> 2630 ☰ ☱ ☲ ☳ ☴ ☵ ☶ ☷ ☸ ☹ ☺ ☻ ☼ ☽ ☾ ☿<br /> 2640 ♀ ♁ ♂ ♃ ♄ ♅ ♆ ♇ ♈ ♉ ♊ ♋ ♌ ♍ ♎ ♏<br /> 2650 ♐ ♑ ♒ ♓ ♔ ♕ ♖ ♗ ♘ ♙ ♚ ♛ ♜ ♝ ♞ ♟<br /> 2660 ♠ ♡ ♢ ♣ ♤ ♥ ♦ ♧ ♨ ♩ ♪ ♫ ♬ ♭ ♮ ♯<br /> 2670 ♰ ♱ ♲ ♳ ♴ ♵ ♶ ♷ ♸ ♹ ♺ ♻ ♼ ♽ ♾ ♿<br /> 2680 ⚀ ⚁ ⚂ ⚃ ⚄ ⚅ ⚆ ⚇ ⚈ ⚉ ⚊ ⚋ ⚌ ⚍ ⚎ ⚏<br /> 2690 ⚐ ⚑ ⚒ ⚓ ⚔ ⚕ ⚖ ⚗ ⚘ ⚙ ⚚ ⚛ ⚜ ⚝ ⚞ ⚟<br /> 26A0 ⚠ ⚡ ⚢ ⚣ ⚤ ⚥ ⚦ ⚧ ⚨ ⚩ ⚪ ⚫ ⚬ ⚭ ⚮ ⚯<br /> 26B0 ⚰ ⚱ ⚲ ⚳ ⚴ ⚵ ⚶ ⚷ ⚸ ⚹ ⚺ ⚻ ⚼ ⚽ ⚾ ⚿<br /> 26C0 ⛀ ⛁ ⛂ ⛃ ⛄ ⛅ ⛆ ⛇ ⛈ ⛉ ⛊ ⛋ ⛌ ⛍ ⛎ ⛏<br /> 26D0 ⛐ ⛑ ⛒ ⛓ ⛔ ⛕ ⛖ ⛗ ⛘ ⛙ ⛚ ⛛ ⛜ ⛝ ⛞ ⛟<br /> 26E0 ⛠ ⛡ ⛢ ⛣ ⛤ ⛥ ⛦ ⛧ ⛨ ⛩ ⛪ ⛫ ⛬ ⛭ ⛮ ⛯<br /> 26F0 ⛰ ⛱ ⛲ ⛳ ⛴ ⛵ ⛶ ⛷ ⛸ ⛹ ⛺ ⛻ ⛼ ⛽ ⛾ ⛿<br /> 2700 ✀ ✁ ✂ ✃ ✄ ✅ ✆ ✇ ✈ ✉ ✊ ✋ ✌ ✍ ✎ ✏<br /> 2710 ✐ ✑ ✒ ✓ ✔ ✕ ✖ ✗ ✘ ✙ ✚ ✛ ✜ ✝ ✞ ✟<br /> 2720 ✠ ✡ ✢ ✣ ✤ ✥ ✦ ✧ ✨ ✩ ✪ ✫ ✬ ✭ ✮ ✯<br /> 2730 ✰ ✱ ✲ ✳ ✴ ✵ ✶ ✷ ✸ ✹ ✺ ✻ ✼ ✽ ✾ ✿<br /> 2740 ❀ ❁ ❂ ❃ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❌ ❍ ❎ ❏<br /> 2750 ❐ ❑ ❒ ❓ ❔ ❕ ❖ ❗ ❘ ❙ ❚ ❛ ❜ ❝ ❞ ❟<br /> 2760 ❠ ❡ ❢ ❣ ❤ ❥ ❦ ❧ ❨ ❩ ❪ ❫ ❬ ❭ ❮ ❯<br /> 2770 ❰ ❱ ❲ ❳ ❴ ❵ ❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿<br /> 2780 ➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉ ➊ ➋ ➌ ➍ ➎ ➏<br /> 2790 ➐ ➑ ➒ ➓ ➔ ➕ ➖ ➗ ➘ ➙ ➚ ➛ ➜ ➝ ➞ ➟<br /> 27A0 ➠ ➡ ➢ ➣ ➤ ➥ ➦ ➧ ➨ ➩ ➪ ➫ ➬ ➭ ➮ ➯<br /> 27B0 ➰ ➱ ➲ ➳ ➴ ➵ ➶ ➷ ➸ ➹ ➺ ➻ ➼ ➽ ➾ ➿<br /> 27C0 ⟀ ⟁ ⟂ ⟃ ⟄ ⟅ ⟆ ⟇ ⟈ ⟉ ⟊ ⟋ ⟌ ⟍ ⟎ ⟏<br /> 27D0 ⟐ ⟑ ⟒ ⟓ ⟔ ⟕ ⟖ ⟗ ⟘ ⟙ ⟚ ⟛ ⟜ ⟝ ⟞ ⟟<br /> 27E0 ⟠ ⟡ ⟢ ⟣ ⟤ ⟥ ⟦ ⟧ ⟨ ⟩ ⟪ ⟫ ⟬ ⟭ ⟮ ⟯<br /> 27F0 ⟰ ⟱ ⟲ ⟳ ⟴ ⟵ ⟶ ⟷ ⟸ ⟹ ⟺ ⟻ ⟼ ⟽ ⟾ ⟿<br /><br /><br /> 2800 ⠀ ⠁ ⠂ ⠃ ⠄ ⠅ ⠆ ⠇ ⠈ ⠉ ⠊ ⠋ ⠌ ⠍ ⠎ ⠏<br /> 2810 ⠐ ⠑ ⠒ ⠓ ⠔ ⠕ ⠖ ⠗ ⠘ ⠙ ⠚ ⠛ ⠜ ⠝ ⠞ ⠟<br /> 2820 ⠠ ⠡ ⠢ ⠣ ⠤ ⠥ ⠦ ⠧ ⠨ ⠩ ⠪ ⠫ ⠬ ⠭ ⠮ ⠯<br /> 2830 ⠰ ⠱ ⠲ ⠳ ⠴ ⠵ ⠶ ⠷ ⠸ ⠹ ⠺ ⠻ ⠼ ⠽ ⠾ ⠿<br /> 2840 ⡀ ⡁ ⡂ ⡃ ⡄ ⡅ ⡆ ⡇ ⡈ ⡉ ⡊ ⡋ ⡌ ⡍ ⡎ ⡏<br /> 2850 ⡐ ⡑ ⡒ ⡓ ⡔ ⡕ ⡖ ⡗ ⡘ ⡙ ⡚ ⡛ ⡜ ⡝ ⡞ ⡟<br /> 2860 ⡠ ⡡ ⡢ ⡣ ⡤ ⡥ ⡦ ⡧ ⡨ ⡩ ⡪ ⡫ ⡬ ⡭ ⡮ ⡯<br /> 2870 ⡰ ⡱ ⡲ ⡳ ⡴ ⡵ ⡶ ⡷ ⡸ ⡹ ⡺ ⡻ ⡼ ⡽ ⡾ ⡿<br /> 2880 ⢀ ⢁ ⢂ ⢃ ⢄ ⢅ ⢆ ⢇ ⢈ ⢉ ⢊ ⢋ ⢌ ⢍ ⢎ ⢏<br /> 2890 ⢐ ⢑ ⢒ ⢓ ⢔ ⢕ ⢖ ⢗ ⢘ ⢙ ⢚ ⢛ ⢜ ⢝ ⢞ ⢟<br /> 28A0 ⢠ ⢡ ⢢ ⢣ ⢤ ⢥ ⢦ ⢧ ⢨ ⢩ ⢪ ⢫ ⢬ ⢭ ⢮ ⢯<br /> 28B0 ⢰ ⢱ ⢲ ⢳ ⢴ ⢵ ⢶ ⢷ ⢸ ⢹ ⢺ ⢻ ⢼ ⢽ ⢾ ⢿<br /> 28C0 ⣀ ⣁ ⣂ ⣃ ⣄ ⣅ ⣆ ⣇ ⣈ ⣉ ⣊ ⣋ ⣌ ⣍ ⣎ ⣏<br /> 28D0 ⣐ ⣑ ⣒ ⣓ ⣔ ⣕ ⣖ ⣗ ⣘ ⣙ ⣚ ⣛ ⣜ ⣝ ⣞ ⣟<br /> 28E0 ⣠ ⣡ ⣢ ⣣ ⣤ ⣥ ⣦ ⣧ ⣨ ⣩ ⣪ ⣫ ⣬ ⣭ ⣮ ⣯<br /> 28F0 ⣰ ⣱ ⣲ ⣳ ⣴ ⣵ ⣶ ⣷ ⣸ ⣹ ⣺ ⣻ ⣼ ⣽ ⣾ ⣿<br /><br /><br /> 2900 ⤀ ⤁ ⤂ ⤃ ⤄ ⤅ ⤆ ⤇ ⤈ ⤉ ⤊ ⤋ ⤌ ⤍ ⤎ ⤏<br /> 2910 ⤐ ⤑ ⤒ ⤓ ⤔ ⤕ ⤖ ⤗ ⤘ ⤙ ⤚ ⤛ ⤜ ⤝ ⤞ ⤟<br /> 2920 ⤠ ⤡ ⤢ ⤣ ⤤ ⤥ ⤦ ⤧ ⤨ ⤩ ⤪ ⤫ ⤬ ⤭ ⤮ ⤯<br /> 2930 ⤰ ⤱ ⤲ ⤳ ⤴ ⤵ ⤶ ⤷ ⤸ ⤹ ⤺ ⤻ ⤼ ⤽ ⤾ ⤿<br /> 2940 ⥀ ⥁ ⥂ ⥃ ⥄ ⥅ ⥆ ⥇ ⥈ ⥉ ⥊ ⥋ ⥌ ⥍ ⥎ ⥏<br /> 2950 ⥐ ⥑ ⥒ ⥓ ⥔ ⥕ ⥖ ⥗ ⥘ ⥙ ⥚ ⥛ ⥜ ⥝ ⥞ ⥟<br /> 2960 ⥠ ⥡ ⥢ ⥣ ⥤ ⥥ ⥦ ⥧ ⥨ ⥩ ⥪ ⥫ ⥬ ⥭ ⥮ ⥯<br /> 2970 ⥰ ⥱ ⥲ ⥳ ⥴ ⥵ ⥶ ⥷ ⥸ ⥹ ⥺ ⥻ ⥼ ⥽ ⥾ ⥿<br /> 2980 ⦀ ⦁ ⦂ ⦃ ⦄ ⦅ ⦆ ⦇ ⦈ ⦉ ⦊ ⦋ ⦌ ⦍ ⦎ ⦏<br /> 2990 ⦐ ⦑ ⦒ ⦓ ⦔ ⦕ ⦖ ⦗ ⦘ ⦙ ⦚ ⦛ ⦜ ⦝ ⦞ ⦟<br /> 29A0 ⦠ ⦡ ⦢ ⦣ ⦤ ⦥ ⦦ ⦧ ⦨ ⦩ ⦪ ⦫ ⦬ ⦭ ⦮ ⦯<br /> 29B0 ⦰ ⦱ ⦲ ⦳ ⦴ ⦵ ⦶ ⦷ ⦸ ⦹ ⦺ ⦻ ⦼ ⦽ ⦾ ⦿<br /> 29C0 ⧀ ⧁ ⧂ ⧃ ⧄ ⧅ ⧆ ⧇ ⧈ ⧉ ⧊ ⧋ ⧌ ⧍ ⧎ ⧏<br /> 29D0 ⧐ ⧑ ⧒ ⧓ ⧔ ⧕ ⧖ ⧗ ⧘ ⧙ ⧚ ⧛ ⧜ ⧝ ⧞ ⧟<br /> 29E0 ⧠ ⧡ ⧢ ⧣ ⧤ ⧥ ⧦ ⧧ ⧨ ⧩ ⧪ ⧫ ⧬ ⧭ ⧮ ⧯<br /> 29F0 ⧰ ⧱ ⧲ ⧳ ⧴ ⧵ ⧶ ⧷ ⧸ ⧹ ⧺ ⧻ ⧼ ⧽ ⧾ ⧿<br /> 2A00 ⨀ ⨁ ⨂ ⨃ ⨄ ⨅ ⨆ ⨇ ⨈ ⨉ ⨊ ⨋ ⨌ ⨍ ⨎ ⨏<br /> 2A10 ⨐ ⨑ ⨒ ⨓ ⨔ ⨕ ⨖ ⨗ ⨘ ⨙ ⨚ ⨛ ⨜ ⨝ ⨞ ⨟<br /> 2A20 ⨠ ⨡ ⨢ ⨣ ⨤ ⨥ ⨦ ⨧ ⨨ ⨩ ⨪ ⨫ ⨬ ⨭ ⨮ ⨯<br /> 2A30 ⨰ ⨱ ⨲ ⨳ ⨴ ⨵ ⨶ ⨷ ⨸ ⨹ ⨺ ⨻ ⨼ ⨽ ⨾ ⨿<br /> 2A40 ⩀ ⩁ ⩂ ⩃ ⩄ ⩅ ⩆ ⩇ ⩈ ⩉ ⩊ ⩋ ⩌ ⩍ ⩎ ⩏<br /> 2A50 ⩐ ⩑ ⩒ ⩓ ⩔ ⩕ ⩖ ⩗ ⩘ ⩙ ⩚ ⩛ ⩜ ⩝ ⩞ ⩟<br /> 2A60 ⩠ ⩡ ⩢ ⩣ ⩤ ⩥ ⩦ ⩧ ⩨ ⩩ ⩪ ⩫ ⩬ ⩭ ⩮ ⩯<br /> 2A70 ⩰ ⩱ ⩲ ⩳ ⩴ ⩵ ⩶ ⩷ ⩸ ⩹ ⩺ ⩻ ⩼ ⩽ ⩾ ⩿<br /> 2A80 ⪀ ⪁ ⪂ ⪃ ⪄ ⪅ ⪆ ⪇ ⪈ ⪉ ⪊ ⪋ ⪌ ⪍ ⪎ ⪏<br /> 2A90 ⪐ ⪑ ⪒ ⪓ ⪔ ⪕ ⪖ ⪗ ⪘ ⪙ ⪚ ⪛ ⪜ ⪝ ⪞ ⪟<br /> 2AA0 ⪠ ⪡ ⪢ ⪣ ⪤ ⪥ ⪦ ⪧ ⪨ ⪩ ⪪ ⪫ ⪬ ⪭ ⪮ ⪯<br /> 2AB0 ⪰ ⪱ ⪲ ⪳ ⪴ ⪵ ⪶ ⪷ ⪸ ⪹ ⪺ ⪻ ⪼ ⪽ ⪾ ⪿<br /> 2AC0 ⫀ ⫁ ⫂ ⫃ ⫄ ⫅ ⫆ ⫇ ⫈ ⫉ ⫊ ⫋ ⫌ ⫍ ⫎ ⫏<br /> 2AD0 ⫐ ⫑ ⫒ ⫓ ⫔ ⫕ ⫖ ⫗ ⫘ ⫙ ⫚ ⫛ ⫝̸ ⫝ ⫞ ⫟<br /> 2AE0 ⫠ ⫡ ⫢ ⫣ ⫤ ⫥ ⫦ ⫧ ⫨ ⫩ ⫪ ⫫ ⫬ ⫭ ⫮ ⫯<br /> 2AF0 ⫰ ⫱ ⫲ ⫳ ⫴ ⫵ ⫶ ⫷ ⫸ ⫹ ⫺ ⫻ ⫼ ⫽ ⫾ ⫿<br /> 2B00 ⬀ ⬁ ⬂ ⬃ ⬄ ⬅ ⬆ ⬇ ⬈ ⬉ ⬊ ⬋ ⬌ ⬍ ⬎ ⬏<br /> 2B10 ⬐ ⬑ ⬒ ⬓ ⬔ ⬕ ⬖ ⬗ ⬘ ⬙ ⬚ ⬛ ⬜ ⬝ ⬞ ⬟<br /> 2B20 ⬠ ⬡ ⬢ ⬣ ⬤ ⬥ ⬦ ⬧ ⬨ ⬩ ⬪ ⬫ ⬬ ⬭ ⬮ ⬯<br /> 2B30 ⬰ ⬱ ⬲ ⬳ ⬴ ⬵ ⬶ ⬷ ⬸ ⬹ ⬺ ⬻ ⬼ ⬽ ⬾ ⬿<br /> 2B40 ⭀ ⭁ ⭂ ⭃ ⭄ ⭅ ⭆ ⭇ ⭈ ⭉ ⭊ ⭋ ⭌ ⭍ ⭎ ⭏<br /> 2B50 ⭐ ⭑ ⭒ ⭓ ⭔ ⭕ ⭖ ⭗ ⭘ ⭙ ⭚ ⭛ ⭜ ⭝ ⭞ ⭟<br /> 2B60 ⭠ ⭡ ⭢ ⭣ ⭤ ⭥ ⭦ ⭧ ⭨ ⭩ ⭪ ⭫ ⭬ ⭭ ⭮ ⭯<br /> 2B70 ⭰ ⭱ ⭲ ⭳ ⭴ ⭵ ⭶ ⭷ ⭸ ⭹ ⭺ ⭻ ⭼ ⭽ ⭾ ⭿<br /> 2B80 ⮀ ⮁ ⮂ ⮃ ⮄ ⮅ ⮆ ⮇ ⮈ ⮉ ⮊ ⮋ ⮌ ⮍ ⮎ ⮏<br /> 2B90 ⮐ ⮑ ⮒ ⮓ ⮔ ⮕ ⮖ ⮗ ⮘ ⮙ ⮚ ⮛ ⮜ ⮝ ⮞ ⮟<br /> 2BA0 ⮠ ⮡ ⮢ ⮣ ⮤ ⮥ ⮦ ⮧ ⮨ ⮩ ⮪ ⮫ ⮬ ⮭ ⮮ ⮯<br /> 2BB0 ⮰ ⮱ ⮲ ⮳ ⮴ ⮵ ⮶ ⮷ ⮸ ⮹ ⮺ ⮻ ⮼ ⮽ ⮾ ⮿<br /> 2BC0 ⯀ ⯁ ⯂ ⯃ ⯄ ⯅ ⯆ ⯇ ⯈ ⯉ ⯊ ⯋ ⯌ ⯍ ⯎ ⯏<br /> 2BD0 ⯐ ⯑ ⯒ ⯓ ⯔ ⯕ ⯖ ⯗ ⯘ ⯙ ⯚ ⯛ ⯜ ⯝ ⯞ ⯟<br /> 2BE0 ⯠ ⯡ ⯢ ⯣ ⯤ ⯥ ⯦ ⯧ ⯨ ⯩ ⯪ ⯫ ⯬ ⯭ ⯮ ⯯<br /> 2BF0 ⯰ ⯱ ⯲ ⯳ ⯴ ⯵ ⯶ ⯷ ⯸ ⯹ ⯺ ⯻ ⯼ ⯽ ⯾ ⯿</code><br /><br />  </p> <h2>Place a Unicode character in CSS content value</h2> <p><code>a:after {content: "☀";}</code><br /> OR<br /><code>a:after {content: "\2600";}</code></p> <h2>Insert Symbols on html page</h2> <p>&lt;span&gt;Example 1 : Symbol : &amp;spades;&lt;/span&gt;<br /> &lt;span&gt;Example 2  : Dec Value : &amp;#9824;&lt;/span&gt;<br /> &lt;span&gt;Example 3 : Hex value :  &amp;#x2660;&lt;/span&gt;</p> <h2>More:</h2> <blockquote>blockquote</blockquote> <p>Blank (Space) in :after or :before<br /> :after {  content: '\00a0';}</p> <p>http://www.w3schools.com/charsets/ref_utf_symbols.asp</p> <p>http://unicode-table.com/en/#2600</p> </div> <div class="field field--name-field-file field--type-file field--label-inline"> <div class="field__label">File</div> <div class="field__item"> <span class="file file--mime-application-zip file--package-x-generic"> <a href="http://drupal8.ovh/sites/drupal/files/2016-12/UnicodeSymbolsList.zip" type="application/zip; length=34603">UnicodeSymbolsList.zip</a></span> </div> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> <li><a href="/en/tags/css" hreflang="en">CSS</a></li> </ul> </div> <div class="field field--name-field-related-contents field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/en/tutoriels/264/basic-css-styling-tips" hreflang="en">Basic CSS Styling tips</a></div> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=266&amp;2=comment&amp;3=comment" token="b78bad3e"></drupal-render-placeholder> </section> Thu, 24 Nov 2016 12:57:54 +0000 editor 266 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/266/html-unicode-symbols-from-u-2600#comments Basic CSS Styling tips http://drupal8.ovh/en/tutoriels/264/basic-css-styling-tips <span class="field field--name-title field--type-string field--label-hidden">Basic CSS Styling tips</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Tue, 11/15/2016 - 14:29</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Sizes : em and px</p> <p>By default on all browsers 1em is equal to 16px. In px sizes are fix and can't zoom in or out but with em, sizes are relative to the parent element. If you need to use zoom feature, use en intend of px. You can also use a mixin SCSS or LESS like</p> <p><code>@include fontSize(16);</code></p> <p><code>@mixin fontSize($px) {<br />   font-size: ($px/16) + em;<br /> }</code></p> <p> </p> <h2>Blank (Space) in :after or :before</h2> <pre style="background-color:#ffffff;color:#000000;font-family:'Courier New';font-size:12pt;"> :<span style="color:#000080;font-weight:bold;">after </span>{ <span style="color:#0000ff;font-weight:bold;">content</span>: <span style="color:#008000;font-weight:bold;">'\00a0'</span>; }</pre> <p> </p> <h2>SASS (SCSS) and LESS Syntax:</h2> <h3>Calc() function with LESS (calc allow to calculate)</h3> <p><code>width:  calc(~'100% - 50px');</code></p> <h3>Multiline truncation with ellipsis</h3> <p><code>/* SASS mixin for multiline*/<br /> @mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: white){<br />   overflow: hidden;<br />   position: relative;<br />   line-height: $lineHeight;<br />   max-height: $lineHeight * $lineCount;<br />   text-align: justify;<br />   margin-right: -1em;<br />   padding-right: 1em;<br />   &amp;:before {<br />     content: '...';<br />     position: absolute;<br />     right: 0;<br />     bottom: 0;<br />   }<br />   &amp;:after {<br />     content: '';<br />     position: absolute;<br />     right: 0;<br />     width: 1em;<br />     height: 1em;<br />     margin-top: 0.2em;<br />     background: $bgColor;<br />   }<br /> }</code></p> <p><code>.block-with-text {<br />   @include multiLineEllipsis($lineHeight: 1.2em, $lineCount: 3, $bgColor: white);  <br /> }</code></p> <p> </p> <h1>jQuery Style changes</h1> <p>Add odd, even to a list usin jQuery<br /> Example:<br /><code>$('div.list-item:even').addClass('even');<br /> $('div.list-item:odd').addClass('odd');</code></p> <p> </p> <h3>Z-index of position:absolute</h3> <p>To use z-index with the elements position:absolute, all z-index defiend elements mush have position:absolute or position:relative.<br /> Example:<br /><code>- div-parent (position:relative)<br /> - - div-child-1 (position:absolute)<br /> - - div-child-2 (position:relative)</code> &lt;- here, if you don't set the property, by default it can't define z-index.</p> <h3> </h3> <h3>Style input's placeholder (SCSS /LESS example)</h3> <p><code>input {<br />   &amp;::-webkit-input-placeholder { /* Chrome/Opera/Safari */<br />     font-style: italic;<br />   }<br />   &amp;::-moz-placeholder { /* Firefox 19+ */<br />     font-style: italic;<br />   }<br />   &amp;:-ms-input-placeholder { /* IE 10+ */<br />     font-style: italic;<br />   }<br />   &amp;:-moz-placeholder { /* Firefox 18- */<br />     font-style: italic;<br />   }<br /> }</code></p> <h3>Remove / Replace the html "Select" (selectbox's) dropdown arrow</h3> <p><code>  select {<br />     //Remove default arrow<br />     appearance: none;<br />     -moz-appearance: none;<br />     -webkit-appearance: none;<br />     &amp;::-ms-expand {<br />       display: none;<br />     }<br />     //Replace with an image<br />     background-repeat: no-repeat;<br />     background-image: url("/path_to/selecebox_arrow.png");<br />     background-position: right;<br />   }</code></p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> <li><a href="/en/tags/css" hreflang="en">CSS</a></li> </ul> </div> <div class="field field--name-field-related-contents field--type-entity-reference field--label-hidden field__items"> <div class="field__item"><a href="/en/tutoriels/266/html-unicode-symbols-from-u-2600" hreflang="en">HTML Unicode symbols (From U+2600)</a></div> <div class="field__item"><a href="/en/tutoriels/242/css-font-styling" hreflang="en">CSS Font Styling</a></div> <div class="field__item"><a href="/en/tutoriels/22/add-css-to-a-module" hreflang="en">Add CSS stylesheets to a module</a></div> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=264&amp;2=comment&amp;3=comment" token="2e89a2a3"></drupal-render-placeholder> </section> Tue, 15 Nov 2016 13:29:47 +0000 editor 264 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/264/basic-css-styling-tips#comments Specific styling for internet explorer (IE) http://drupal8.ovh/en/tutoriels/262/specific-styling-for-internet-explorer-ie <span class="field field--name-title field--type-string field--label-hidden">Specific styling for internet explorer (IE)</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>What are the specific styling for internet explorer IE9, IE 10, IE11, Edge ...?</p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Wed, 11/09/2016 - 14:12</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p> </p> <h2>1. Removing the Select Element Arrow</h2> <p><code>select::-ms-expand {<br />     display: none;<br /> }<br /> OR<br /> select::-ms-expand {<br />  /* IE 8 */<br />  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";<br />  /* IE 5-7 */<br />  filter: alpha(opacity=0);<br />  /* Good browsers :) */<br />  opacity:0;<br /> }</code></p> <p> </p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> <li><a href="/en/tags/css" hreflang="en">CSS</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=262&amp;2=comment&amp;3=comment" token="5efeb445"></drupal-render-placeholder> </section> Wed, 09 Nov 2016 13:12:48 +0000 editor 262 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/262/specific-styling-for-internet-explorer-ie#comments CSS Font Styling http://drupal8.ovh/en/tutoriels/242/css-font-styling <span class="field field--name-title field--type-string field--label-hidden">CSS Font Styling</span> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Fri, 10/07/2016 - 11:15</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Standard weights:</p> <p>medium -&gt; font-weight : 500;<br /> semi-bold -&gt;font-weight : 600;</p> <h2>Font Face</h2> <p>Example</p> <p><code>@font-face {<br />   font-family: 'Open Sans';<br />   font-weight: 400;<br />   font-style: normal;<br />   src: url('../fonts/Open-Sans-regular.eot');<br />   src: url('../fonts/Open-Sans-regular.eot?#iefix') format('embedded-opentype'),<br />   local('Open Sans'),<br />   local('Open-Sans-regular'),<br />   url('../fonts/Open-Sans-regular.woff2') format('woff2'),<br />   url('../fonts/Open-Sans-regular.woff') format('woff'),<br />   url('../fonts/Open-Sans-regular.ttf') format('truetype'),<br />   url('../fonts/Open-Sans-regular.svg#OpenSans') format('svg');<br /> }</code></p> <h3>Font face With Unicode-range</h3> <p><code>@font-face {<br />   font-family: 'myfontstyle';<br />   url('../fonts/font_style.ttf') format('truetype');<br />   unicode-range: U+40;<br /> }<br /> div {<br />   font-size: 4em;<br />   font-family: myfontstyle;    <br /> }</code></p> <p>unicode-range Syntax<br /><code>unicode-range: U+26;               /* single codepoint */<br /> unicode-range: U+0-7F;<br /> unicode-range: U+0025-00FF;        /* codepoint range */<br /> unicode-range: U+4??;              /* wildcard range */<br /> unicode-range: U+0025-00FF, U+4??; /* multiple values */</code></p> <p> </p> <p> </p> <p>More : http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp</p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/css" hreflang="en">CSS</a></li> <li><a href="/en/tags/code" hreflang="en">Code</a></li> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=242&amp;2=comment&amp;3=comment" token="d0d959b3"></drupal-render-placeholder> </section> Fri, 07 Oct 2016 09:15:59 +0000 editor 242 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/242/css-font-styling#comments Reorder Elements using CSS http://drupal8.ovh/en/tutoriels/176/reorder-elements-using-css <span class="field field--name-title field--type-string field--label-hidden">Reorder Elements using CSS</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>How to reorder elements (div) by CSS</p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Fri, 07/01/2016 - 15:16</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Example :</p> <p><code>&lt;style&gt;<br /> #parent-div { display: flex; }<br /> #el1 { order: 3; }<br /> #el2 { order: 2; }<br /> #el3 { order: 1; }<br /> &lt;/style&gt;</code></p> <p><code>&lt;div id="parent-div"&gt;<br />    &lt;div id="el1"&gt;A&lt;/div&gt;<br />    &lt;div id="el1"&gt;B&lt;/div&gt;<br />    &lt;div id="el1"&gt;C&lt;/div&gt;<br /> &lt;/div&gt;</code></p> <p> </p> <p>Another Solution:</p> <p><code>.container {<br />   /* Setup Flexbox */<br />   display: -webkit-box;<br />   display: -moz-box;<br />   display: -ms-flexbox;<br />   display: -webkit-flex;<br />   display: flex;<br />   /* Reverse Column Order */<br />   -webkit-flex-flow: column-reverse;<br />   flex-flow: column-reverse;</code></p> <p><code>}</code></p> <p><code>/* -- Styling Only -- */<br /> .container &gt; div {<br />   background: red;<br />   color: white;<br />   padding: 10px;<br /> }<br /> .container &gt; div:last-of-type {<br />   background: blue;<br /> }</code></p> <p><code>&lt;div class="container"&gt;<br />   &lt;div class="first"&gt;<br />      first element<br />   &lt;/div&gt;<br />   &lt;div class="second"&gt;<br />     second Element<br />   &lt;/div&gt;<br /> &lt;/div&gt;</code></p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> <li><a href="/en/tags/css" hreflang="en">CSS</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=176&amp;2=comment&amp;3=comment" token="8ee01363"></drupal-render-placeholder> </section> Fri, 01 Jul 2016 13:16:51 +0000 editor 176 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/176/reorder-elements-using-css#comments SASS SCSS LESS compile http://drupal8.ovh/en/tutoriels/172/sass-scss-compile <span class="field field--name-title field--type-string field--label-hidden">SASS SCSS LESS compile</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>How to compile SASS / SCSS file in to CSS ?</p> <p>How to compile LESS file in to CSS ?</p> <p>How to auto compile a SASS File with PhpStorm ?</p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Tue, 06/21/2016 - 18:24</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><h2>Compilers</h2> <p>1. COMPASS</p> <p>Compass is a powerfull command line compiler</p> <p>Install (Linux debian) : <strong><code>sudo apt-get install ruby-compass</code></strong></p> <p>Link : http://compass-style.org/help/documentation/command-line/</p> <p>2. Koala</p> <p>Koala is a SASS / LESS compiler available on Windows, Linux and Mac OSX</p> <p>3. WinLESS</p> <p>Winless is a LESS compiler for Windows. it's free and efficient.</p> <h2>SCSS / LESS Configuration with PhpStorm (File Watchers)</h2> <ol><li>Add File Watcher (File-&gt;Settings-&gt;Tools-&gt;File Watcher-&gt;Add-&gt;SCSS)</li> <li>Create new scope to detect your .scss files (Ex: Select and <strong>Include Recursively</strong> the scss folder)</li> <li>Set Program Path (Ex: /usr/bin/scss) (Install SCSS if not already done)</li> <li>Set Arguments (Ex: --no-cache --update style.scss:style.css)<br /> -&gt; Add other options if you want (<em>--style compressed</em>)</li> <li>Set output paths to refresh (Ex: style.css)</li> <li>Save and Apply</li> </ol><p> </p> <h2>COMPASS Configuration with PhpStorm</h2> <p>1. Install COMPASS</p> <p>2. Setup File watcher (File -&gt; Settings -&gt; Tools -&gt; File Watchers)</p> <p>Add new file Watcher and configure:<br /> Example to compile a single scss file:<br /> Program:  /usr/bin/compass<br /> Arguments: compile $FileName$<br /> Working Directory: $FileDir$</p> <p>3 Create compass config file (config.rb) in the SCSS file directory<br /> Example:<br /> http_path = "/"<br /> css_dir = "."<br /> sass_dir = "."<br /> images_dir = "../images"<br /> javascripts_dir = "../js"</p> <p>4. When you save the SCSS File, it will compile automatically.</p> <p> </p> <p>Link : https://www.jetbrains.com/help/phpstorm/2016.1/working-with-sass-and-scss-in-compass-projects.html</p> <p> </p> <p> </p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/css" hreflang="en">CSS</a></li> <li><a href="/en/tags/code" hreflang="en">Code</a></li> <li><a href="/en/tags/settings" hreflang="en">Settings</a></li> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=172&amp;2=comment&amp;3=comment" token="67950a18"></drupal-render-placeholder> </section> Tue, 21 Jun 2016 16:24:12 +0000 editor 172 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/172/sass-scss-compile#comments CSS Word Wrapping and Text Overflow Propertys http://drupal8.ovh/en/tutoriels/171/css-word-wrapping-and-text-overflow-propertys <span class="field field--name-title field--type-string field--label-hidden">CSS Word Wrapping and Text Overflow Propertys</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><ul><li>How to disable / turn off HTML word wrapping using CSS ?</li> <li>How to handle ?</li> <li>How to Truncate a text using CSS ?</li> </ul></div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Mon, 06/20/2016 - 14:29</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><h2><span>Word Wrap (</span> <span>word-wrap</span> )</h2> <p>Available values of <span>word-wrap</span> property: normal, break-word, initial, inherit</p> <p>Example : Disable HTML word wrapping using CSS</p> <p><code>.your-class{white-space:nowrap;}</code></p> <p><code>.your-class{white-space:nowrap;width: 150px; overflow: hidden;} </code></p> <h2>Overflow</h2> <p>Available values of overflow property: visible, hidden, scroll, auto, initial, inherit</p> <p>Example : Overflow</p> <p><code>.your-class {<br />     width: 300px;<br />     height: 300px;<br />     overflow: scroll;<br /> }</code></p> <h2>Text Overflow (text-overflow)</h2> <p>Available values of text-overflow property: clip, ellipsis (...), initial, inherit and 'Custom string'</p> <p>Example : text-overflow</p> <p><code>.your-class {<br />     overflow:hidden;<br />     <span>text-overflow</span><span><span>:</span><span> </span>ellipsis<span>;</span></span><br /> }</code></p> <p> </p> <p>Truncate a text with white-space, overflow and text-overflow</p> <p>Example :</p> <p><code>.your-class {<br />   width: 100px;<br />   white-space: nowrap;<br />   overflow: hidden;<br />   text-overflow: ellipsis;<br /> }</code></p> <p> </p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> <li><a href="/en/tags/css" hreflang="en">CSS</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=171&amp;2=comment&amp;3=comment" token="5fae816b"></drupal-render-placeholder> </section> Mon, 20 Jun 2016 12:29:23 +0000 editor 171 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/171/css-word-wrapping-and-text-overflow-propertys#comments CSS block formating contexte / CSS Box Model http://drupal8.ovh/en/tutoriels/166/css-block-formating-contexte-css-box-model <span class="field field--name-title field--type-string field--label-hidden">CSS block formating contexte / CSS Box Model</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>How to set the correct block format ?</p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Tue, 06/14/2016 - 16:32</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Tuto English : <br /> CSS Box Model : http://www.w3schools.com/css/css_boxmodel.asp<br /> CSS display Property - http://www.w3schools.com/cssref/pr_class_display.asp</p> <p>Tuto (in French) : http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html</p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/css" hreflang="en">CSS</a></li> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=166&amp;2=comment&amp;3=comment" token="c9f3e598"></drupal-render-placeholder> </section> Tue, 14 Jun 2016 14:32:27 +0000 editor 166 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/166/css-block-formating-contexte-css-box-model#comments CSS Filters - Edit Image/Div using filter Property http://drupal8.ovh/en/tutoriels/151/css-filters <span class="field field--name-title field--type-string field--label-hidden">CSS Filters - Edit Image/Div using filter Property</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>How to edit Image/Elements using filter Property of CSS?<br /> - Add a gray mask with CSS ?</p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Wed, 06/01/2016 - 13:46</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Filters list (Syntaw)</p> <p>filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();</p> <p>Examples:</p> <p>Convert  block/image ... to black and white (Gray out):</p> <p><code>div {<br />   -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */<br />   filter: grayscale(100%);<br /> }</code></p> <p>NOTE : Filter is not working in IE, Solutions:</p> <p>For images :<br /> https://gianlucaguarini.github.io/jQuery.BlackAndWhite/ (https://github.com/GianlucaGuarini/jQuery.BlackAndWhite)<br /> http://work.karlhorky.com/gray/ (https://github.com/karlhorky/gray)</p> <p>For any elements: GRAYSCALE.JS <br /> http://james.padolsey.com/css/grayscaling-in-non-ie-browsers/ (http://james.padolsey.com/demos/grayscale/grayscale.js)</p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> <li><a href="/en/tags/css" hreflang="en">CSS</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=151&amp;2=comment&amp;3=comment" token="d1896c9d"></drupal-render-placeholder> </section> Wed, 01 Jun 2016 11:46:33 +0000 editor 151 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/151/css-filters#comments SASS LESS Configuration file. config.rb http://drupal8.ovh/en/tutoriels/130/sass-less-configuration-file-config-rb <span class="field field--name-title field--type-string field--label-hidden">SASS LESS Configuration file. config.rb</span> <div class="clearfix text-formatted field field--name-field-question field--type-text-long field--label-above"> <div class="field__label">Question</div> <div class="field__item"><p>How to define SASS (SCSS) and LESS configuration using config.rb ?</p> </div> </div> <span class="field field--name-uid field--type-entity-reference field--label-hidden"><span lang="" about="/en/users/editor" typeof="schema:Person" property="schema:name" datatype="">editor</span></span> <span class="field field--name-created field--type-created field--label-hidden">Wed, 04/13/2016 - 16:13</span> <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item"><p>Example 1. SASS (SCSS)</p> <p><code>http_path = "/"<br /> css_dir = "css"<br /> sass_dir = "sass"<br /> images_dir = "images"</code></p> <p>Example 2. SASS (SCSS)</p> <p><code>http_path = "/"<br /> css_dir = ""<br /> sass_dir = "sass"<br /> images_dir = "images"<br /> javascripts_dir = "javascripts"<br /> output_style = :nested<br /> relative_assets = true<br /> line_comments = false</code></p> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-inline clearfix"> <h3 class="field__label inline">Tags</h3> <ul class="links field__items"> <li><a href="/en/tags/theming" hreflang="en">Theming</a></li> <li><a href="/en/tags/css" hreflang="en">CSS</a></li> </ul> </div> <section class="field field--name-comment field--type-comment field--label-above comment-wrapper"> <h2 class="title comment-form__title">Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=130&amp;2=comment&amp;3=comment" token="39a9d828"></drupal-render-placeholder> </section> Wed, 13 Apr 2016 14:13:49 +0000 editor 130 at http://drupal8.ovh http://drupal8.ovh/en/tutoriels/130/sass-less-configuration-file-config-rb#comments