如何將 emoji 當成單色 icon 使用

原文： How to Use Emojis as Icons

做者：Preethi Sam

使用單色 emoji

在 web 設計中 icon 變得愈來愈重要，在網上有不少關於 icon 的資源，免費的付費的都有。在這裏，介紹如何運用一種已經咱們很是熟悉的方式 -- emoji ，來當成 icon 使用。

emoji 的一個好處是已經在系統中內置，而 icon 資源還須要從站點服務器獲取。emoji 只是一些跟普通文本相似的簡單字符，因此這會是傳統 icon 圖片的一種很好的替代方式。

使用 emoji 很簡單，只須要經過鍵盤將其做爲文本添加到 HTML 中，或者是直接使用它們的 Unicode 字符碼點。但要把它們當成 icon 使用，還有一點問題。

一般，icon 是單色組成的形狀，但 emoji 並非。

可使用 text-shadow 來實現將其變成單色。

<ul>
    <li><span class=icon>🚲</span>   Bicycles</li>
    <li><span class=icon>✈️</span>   Planes</li>
    <li><span class=icon>🚂</span>   Trains</li>
</ul>
<ul>
    <li><span class=icon>📥</span>   Inbox</li>
    <li><span class=icon>📤</span>   Outbox</li>
    <li><span class=icon>📁</span>   Folder</li>
</ul>

加點 css:

.icon {
    color: transparent;
    text-shadow: 0 0 #ec2930;
}

CodePen: Emojis as Icons

將 color 設置成 transparent 會隱藏本來的 emoji，而後咱們看到的實際上是它的陰影。

另外一種實現方式是使用 background-clip：

.icon {
    color: transparent;
    background-color: #ec2930;
    background-clip: text;
    -webkit-background-clip: text;
}

使用這種方式，還能夠設置漸變背景來得到漸變色的 icon ：

.icon {
    color: transparent;
    background-image: linear-gradient(45deg, blue, red);
    background-clip: text;
    -webkit-background-clip: text;
}

Emojis as Icons: gradient

Unicode 與 emoji

在上述例子中的 6 個 emoji，有一個跟其他 5 個是不一樣類型，就是 ✈️。咱們已經瞭解，emoji 不是什麼魔法，就是一個 Unicode 字符，不一樣的系統會對其作不一樣處理，好比在 Windows 7 及之前這些字符原本都是單色的，大概到如今主流的 Windows 10 已經有了各類五光十色的 emoji。先看看例子中 6 個 emoji 的碼點：

'🚲'.codePointAt().toString(16) // 1f6b2
'✈️'.codePointAt().toString(16) // 2708
'🚂'.codePointAt().toString(16) // 1f682
'📥'.codePointAt().toString(16) // 1f4e5
'📤'.codePointAt().toString(16) // 1f4e4
'📁'.codePointAt().toString(16) // 1f4c1

除了 '✈️'，其他 emoji 都不在 Unicode 基本平面（U+0000 ~ U+FFFF）。

好久好久之前，人們覺得這世界上的各類符號只須要 16 位就能夠搞定，即 65536 個字符。後來發現根本不夠用，因而開始進行擴展，增長了 16 個輔助平面，能夠表示的範圍是 U+000000 ~ U+10FFFF。JavaScript 中採用的 Unicode 編碼方式是 utf-16，基本平面的使用兩個字節表示一個字符，輔助平面的須要四個字節。字符的 Unicode 的表示法在 JavaScript 中以下：

\uxxxx

xxxx 表示字符的 Unicode 碼點，範圍是 u0000~uFFFF。好比：

console.log('\u2708') // ✈

這個飛機 ✈ 長得有點奇怪，跟例子中的 ✈️ 根本就不是一個。Why?

'✈️'.length // 2

'✈️' 的長度也是 2，不妨看看第二位的碼點

'✈️'.codePointAt(1).toString(16) // fe0f

fe0f 這實際上是一個 emoji 異體字選擇符，就是將以前版本已經存在的字符進行 emoji 轉換。

因此，須要這樣一塊兒使用：

console.log('\u2708\ufe0f') // ✈️

其他 5 個 emoji，自己就是碼點超過 uffff 的字符，在 ES6 新增一種表示法：

\u{xxxxxx}

就像這樣：

console.log('\u{1f6b2}') // 🚲
console.log('\u{1f682}') // 🚂
console.log('\u{1f4e5}') // 📥
console.log('\u{1f4e4}') // 📤
console.log('\u{1f4c1}') // 📁

固然，也是能夠經過 charCodeAt 獲取不一樣位置的碼點，使用老派表示法：

const h = '🚂'.charCodeAt(0).toString(16) // d83d
const l = '🚂'.charCodeAt(1).toString(16) // de82
console.log(String.fromCharCode(0xd83d, 0xde82)) // 🚂
console.log('\ud83d\ude82') // 🚂

基本平面的 /ud800 到 /udfff 是空段，輔助平面共有 2^20 個字符，在 utf-16 編碼時，高位映射到 /ud800 到 /udbff（空間大小 2^10，即 0x400)，低位映射到 /udc00 到 /udfff，對應的映射規則計算方式是：

H = Math.floor((char - 0x10000) / 0x400) + 0xD800

L = (char - 0x10000) % 0x400 + 0xDC00

因此，當知道其碼點時，還能夠直接計算其編碼。