不管你從事什麼行業，只要你有使用 3C 產品，應該都有上網找教學文章的經驗。當資料內出現需要你操作軟體或網頁的時候，如果這時他的文字敘述沒有很明確，不只是你，就算是我也很容易會卡關。
而因為我們寫的是死板的教學文章，不像 YouTube 影片那樣可以用各種動態的特效來指示觀眾，所以自然的，作者在文章中必須下更多的功夫，免得讓別人看的一頭霧水。當然最基本的還是文筆練習，但其實還有個更容易提昇訪客閱讀效率的方法，就是加入「圖像」。
我要在這邊介紹一個名為「Material Design Icon」的東西給你，他是 Google 提供的一套以 Material Design 原則進行設計圖示包，並且免費提供給任何人用於產品、作業或網站等商業與非商業用途。而我們的重點就在於它能以「字型」的方式加到網頁當中，可以直接在段落文字之間加入「圖示」文字，進而豐富你的文章。
當然啦！如果你用來寫文章的平台沒辦法自己新增字型來源，Material Design Icon 還有提供 PNG、SVG 的圖像格式下載，還是可以折衷一點直接給它插入圖片，強化效果還是有的。
偷偷給還在用痞客X、隨X窩等平台的作者個建議，是時候該來了解 WordPress 了吧？
編輯原始碼，在中加入圖示字型資源
這邊一律以 WordPress 來說明，我們現在要在網頁原始碼的 標籤中加入新的代碼，雖然你可以直接編輯佈景主題的 header.php，但我會搭配 Header and Footer Scripts 或 Ad Inserter 之類的外掛來快速嵌入程式碼。
總之，請想辦法在之前加入以下這段程式碼。
WordPress 就是這麼方便，表單填一填就設定好了。
編輯文章內文，加入圖示文字
接下來呢…就是最重要的編輯文章啦！這邊你就得要懂一點基礎 HTML 才行了。
首先請先選中你的段落區塊，依序點擊右上角的 more_vert 與 編輯 HTML 程式碼，切換為原始碼模式。
然後直接在要加入圖示的文字旁貼上這串程式碼：
face
最後請開個瀏覽器新分頁，到 Material.io 網頁中找出你要的圖示名稱，並將剛剛貼上程式碼當中的 face 改掉。
比如說我現在要的是這個 3d_rotation：
那我改過的程式碼就會是：
3d_rotation
整個文字段落的程式碼可能長這樣：
你知道3d\_rotation圖示嗎？
最後出來的就是：
「你知道_3d_rotation_圖示嗎？」。
這樣應該 OK 吧？如果他的圖示太大或太小的話，你還可以透過 CSS 去修改他的尺寸。
樣式代碼如下，剩下就交給你自己去微調囉…
.material-icons { font-size: 20px; }
