隨著即時通訊和社群網路應用發展,現今表情符號(Emoji)也深入每個人的生活,幾乎可以說是網路文化不可或缺的一環,從 iOS、Android 到用來架設網站的 WordPress 都支援表情符號功能。最早 Emoji 出現於日本手機上,但現在已被全世界廣泛使用,包括各種行動裝置及桌上型電腦,這些可愛表情符號的優點是只要一個圖案就能少打很多字,對於手機來說特別有用。
如果你也想在網站上加入表情符號,但又不是使用 WordPress 或其他支援 Emoji 平台,那麼可以試著使用 Emoji CSS 表情符號庫讓你的網站支援表情圖案。
Emoji CSS 是開放原始碼專案,收錄數百種表情符號,每一個表情圖案都是由背景圖產生,因此每個 Emoji 都有自己的 PNG 圖片格式,這些圖案支援 Retina 顯示器,無論在任何螢幕大小都能正確顯示。
Emoji CSS 最簡單的載入方法是加入一段 CSS 樣式表鏈結(由 GitHub 托管,不會耗用你的網站流量),就能指定樣式來讓 Emoji 顯示,因此你不用下載或將任何圖檔上傳到伺服器。如果不清楚怎麼做,Emoji CSS 官方網站也有提供基本的範例說明,稍作修改就能使用。
網站名稱:Emoji CSS
網站鏈結:https://afeld.github.io/emoji-css/
使用教學
STEP 1
開啟 Emoji CSS 網站後,可以看到網站列出的所有表情符號列表。
STEP 2
重點在於 Emoji CSS 上方灰黑色背景的部分可以找到一段 CSS 樣式表鏈結,只要把它複製、貼上於網站的 <head> </head> 部分,就能在網站裡載入 Emoji CSS 程式庫。
第二段的 <i class=“em em-some-emoji”></i> 則是載入表情符號的方法示範。
STEP 3
點選 Emoji CSS 網站中的任何一個表情圖案後,右上角會出現提示,表示已經將這個表情符號的樣式載入原始碼複製完畢,把這段語法貼到你的網站中,就能顯示你剛才選擇的 Emoji。