如何将 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

因此，当知道其码点时，还能够直接计算其编码。