小圖示在網頁設計中具有「畫龍點睛」的效果，今天就跟讀者簡單介紹如何在Codpen中，使用「Font Awesome」中的小圖示，讓自己的網頁更添多元元素。

Codepen網站是什麼?用途為何

CodePen是一個線上的前端開發工具，允許使用者創建、分享和發佈HTML、CSS和JavaScript程式碼。CodePen的主要特點是它的社交性，它允許使用者在一個社群中互相分享和學習，並且可以在線上與他人協作編輯同一個程式碼，從而使得前端開發變得更加互動和有趣。

在CodePen中，使用者可以創建自己的個人檔案，將自己的程式碼作品與社群分享。這些作品可以被分類和標籤化，讓其他使用者能夠更輕易地搜尋和發現有趣的程式碼片段。使用者還可以發佈自己的程式碼作品，讓其他人在瀏覽器中直接體驗和測試。CodePen也支持將程式碼嵌入到其他網站中，從而方便使用者在其他網站中展示自己的作品。

除了作品展示外，CodePen還提供了許多學習和交流的機會。使用者可以參加網站上舉辦的各種挑戰和比賽，學習新技術並與其他開發者互動。CodePen還有一個社區區域，允許使用者討論技術問題、分享開發心得和經驗等等。

總之，CodePen是一個非常有用的前端開發工具和社區，它讓前端開發變得更加有趣和互動。無論你是初學者還是有經驗的開發者，都可以在CodePen中找到自己需要的東西。

如何在Codepen中使用Font Awesome功能

方法一:使用Font Awesome網站

1、到Font Awesome網頁

2、點擊【Start  For Free】按鈕

3、輸入註冊信箱後，點擊【Send kit Code】

4、到註冊信箱點擊【Click to Confirm Your Email Address + Set Things Up】確認註冊信件

5、將箭頭所指的Javascript密碼複製並張貼到codepen，放置在Html的「head」

6、將前述Javascript程式碼，張貼在codpen在Html的「head」部分

7、點擊網頁上方「Icons」按鈕

8、接續點擊「total icons in Font Awesome 6 pro」，可以獲得共16,083個小圖示

9、上述16,083個小圖示，但多數都是需要付費的!想要免費的小圖示。讀者點擊「Free」按鈕，即可2,009個小圖示。

10、隨機點擊一個小圖示，本次示範為小魚字樣的圖示

11、複製【<i class=”fa-brands fa-42-group”></i>】程式碼

12、將上述程式碼，張貼在codpen中Html的【body】部分，在下方中就可以看到藍色箭頭所指的魚形小圖示

方法二:使用CDNJS網站

CDNJS是一個開源的Content Delivery Network (CDN)，專門為前端開發者提供免費的JavaScript、CSS、fonts等資源庫。它提供了眾多的開源庫，其中包括了一些知名的JavaScript庫，例如jQuery、React、Angular、Vue等等。使用者可以透過CDNJS來加速自己的網頁載入速度，同時也不用擔心網路流量或是網站負擔的問題。

使用CDNJS在CodePen中導入Font Awesome功能，主要是將複製下圖網址複製。

在CodePen的HTML部分，引入即可使用Font Awesome功能。