如何將emoji當成單色icon使用

雲棲直播~發表於2018-07-09

原文：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;
}
複製程式碼

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(`u2708ufe0f`) // ️
複製程式碼

其餘 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(`ud83dude82`) // 
複製程式碼

基本平面的 /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
複製程式碼

所以，當知道其碼點時，還可以直接計算其編碼。

原文釋出時間為：2018年07月02日

本文作者：掘金

本文來源：掘金 如需轉載請聯絡原作者

相關文章