原文：
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

所以，當曉得其碼點時，還能夠直接盤算其編碼。