編碼的世界 / 優質文選 / 生涯

將阿裏圖標iconfont轉成css代碼顯示


2021年9月22日
-   

在做網站的過程中難免會使用到各種小圖標,現在總結一個使用阿裏圖標轉成css的方法。
  • 1打開https://www.iconfont.cn網站,先登錄賬號,將自己需要的圖標選擇添加入庫。
  • 5找到下載的壓縮包中的stylesheet.css文件,將裏面的代碼全部複制到第3步中的demo.css的最前面
  • 6然後新建個demo.html,就能查看到小圖標了

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<i class="iconfont icon-zhifubaofukuan"></i>
<i class="iconfont icon-view-grid"></i>
<i class="iconfont icon-layout-tab-v"></i>
<i class="iconfont icon-bar-chart"></i>
<i class="iconfont icon-zhifubaofukuan"></i>
</body>
</html>


如果所下載的小圖標都不是一個網站的情況,比如在百度也下載了小圖標 http://fontstore.baidu.com/
  • 1 進入http://fontstore.baidu.com/static/editor/index.html此網站,點導入svg。
  • 2選中所有圖標,點擊設置代碼點,然後可以給每個小圖標命名,也可以用自動生成的默認命名,然後點擊下載zip。
  • 3接著上面的第三步

熱門文章