Emoji CSS 免費表情符號圖示庫,讓你的網站支援表情圖案功能

Emoji CSS 免費表情符號圖示庫,讓你的網站支援表情圖案功能
(Copyright: flynt / 123RF Stock Photo

隨著即時通訊和社群網路應用發展,現今表情符號(Emoji)也深入每個人的生活,幾乎可以說是網路文化不可或缺的一環,從 iOS、Android 到用來架設網站的 WordPress 都支援表情符號功能。最早 Emoji 出現於日本手機上,但現在已被全世界廣泛使用,包括各種行動裝置及桌上型電腦,這些可愛表情符號的優點是只要一個圖案就能少打很多字,對於手機來說特別有用。

如果你也想在網站上加入表情符號,但又不是使用 WordPress 或其他支援 Emoji 平台,那麼可以試著使用 Emoji CSS 表情符號庫讓你的網站支援表情圖案。

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 網站後,可以看到網站列出的所有表情符號列表。

Emoji CSS

STEP 2

重點在於 Emoji CSS 上方灰黑色背景的部分可以找到一段 CSS 樣式表鏈結,只要把它複製、貼上於網站的 <head> </head> 部分,就能在網站裡載入 Emoji CSS 程式庫。

第二段的 <i class=“em em-some-emoji”></i> 則是載入表情符號的方法示範。

Emoji CSS

STEP 3

點選 Emoji CSS 網站中的任何一個表情圖案後,右上角會出現提示,表示已經將這個表情符號的樣式載入原始碼複製完畢,把這段語法貼到你的網站中,就能顯示你剛才選擇的 Emoji。

Emoji CSS

Pseric

學生時代成立網站以來堅持每日更新,在挖掘資料的過程中慢慢找出自己經營網站的方法,最開心的是有一群一起長大的讀者。

分享到...