CSS定制圖標實現了一個網站的展現，在網站建設上起到了至關重要的作用。下面我們將介紹如何通過 CSS 定制圖標。
第一步，你需要選擇你需要的圖標。你可以上網站找到你需要的圖標，然后將圖標圖片保存在你的本地工程中，這樣就可以進行后續的操作。
第二步，將圖標轉換成BASE64編碼，可以將圖片轉換成Data URI scheme在 CSS 中使用，這里我們可以通過在線轉換網站，如 https://www.base64-image.de/ 來進行操作。打開網站后，選擇你需要轉換的圖片，到底下復制轉換后的 BASE64 編碼。
第三步，使用 CSS 來實現自定義圖標，這里提供兩種方式。第一種是通過偽類:before和:after來實現。代碼示例如下：
pre {
content: "\f064"; /*這里是圖標的Unicode編碼*/
font-family: FontAwesome; /*這里使用的是FontAwesome圖標庫*/
font-size: 20px; /*圖標大小*/
}
第二種則是通過img標簽來實現：
pre {
background: url(data:image/png;base64,) no-repeat center center;
background-size: contain;
height: 50px; /*圖標高度*/
width: 50px; /*圖標寬度*/
}
綜上所述，通過上述三個步驟，我們可以很容易地通過 CSS 定制圖標。
上一篇css定制邊框