阿里矢量圖標

是目前國內功能強大圖標豐富的圖標庫 由阿里巴巴傾力打造 ? 字體圖標 ? 使用步驟： 1.登錄https://www.iconfont.cn/ 2.挑選相對應的圖標加入購物車 3.點擊網址右上角的購物車，點擊下載代碼 4.把下載的文件解壓一下，建議改一下文件名（font） 5.把解壓的文件放道項目中（寫代碼的文件中（代碼和此文件呈并列關系）） ? 一般都使用Unicode 方式引用和font-class 方式引用 ?

1、Unicode 方式引用

<!-- 第一步：引入項目下面生成的iconfont.css文件： --> <link rel="stylesheet" href="./font/font_1v4mvgi3fzs/iconfont.css"> ? ? /* 通過字體屬性改變圖標 */ .box { /* 修改字體圖標的顏色 */ color: tomato; /* 修改字體圖標的大小 */ font-size: 50px; /* 修改字體圖標的加粗 */ font-weight: bold; } ? .iconfont { /* color: yellow; */ } ? <!-- 第二步 ：挑選相應圖標并獲取字體編碼，應用于頁面：--> <!-- &#xe65e;字體編碼 --> ? <!-- iconfont這個類名必須加,是字體圖標的公共類名 "iconfont" 是你項目下的 font-family。可以通過編輯項目查看，默認是 "iconfont"。 --> ? <!-- 把字體編碼放到標簽中間 --> <span class="iconfont box">&#xe605;</span> <div class="iconfont">&#xe510;</div> ? ? ? 注意：代碼引入方式不支持色彩 ? 但是可以通過字體屬性調整圖標的樣式 字體顏色：color 字體大小：font-size 字體加粗：font-weight ? ? 不直觀 ?

2、font-class 方式引用

? <!-- 第一步：引入項目下面生成的iconfont.css文件： --> <link rel="stylesheet" href="./font/font_1v4mvgi3fzs/iconfont.css"> ? /* 改變樣式 */ .icon-qunzi- { color: tomato; font-size: 50px; } ? .icon-paochejiuyuan1 { color: green; font-size: 60px; font-weight: bold; } ? <!-- font-class 是 Unicode 使用方式的一種變種，主要是解決 Unicode 書寫不直觀，語意不明確的問題。 --> ? <!-- 第二步：挑選相應圖標并獲取類名，應用于頁面： --> <!-- iconfont這個類名必須加,是字體圖標的公共類名 --> <!-- .icon-meinv 復制的時候不要把.復制進去 ? --> <!-- qunzi 裙子 直觀 --> <span class="iconfont icon-qunzi-"></span> <!-- wanghongshuaige --> <span class="iconfont icon-wanghongshuaige"></span> <span class="iconfont icon-meinv"></span> ? <div class="iconfont icon-paochejiuyuan1"></div> ? <p class="iconfont icon-056-girl-1"></p> ? ? <!-- i em 標簽沒有在瀏覽器中顯示斜體，因為字體圖標的iconfont樣式中有： ? font-style: normal;字體樣式正常 --> <em class="iconfont icon-paoche"></em> <i class="iconfont icon-paoche"></i> ? <!-- 多個類名中間用空格隔開 --> ?

3、Symbol方式引用

? <!-- 第一步：引入項目下面生成的/iconfont.js文件： --> <!-- js文件用script標簽的src屬性引入 --> <script src="./font/font_1v4mvgi3fzs/iconfont.js"></script> ? <!-- 第二步：加入通用 CSS 代碼（引入一次就行）： --> <style>.icon {/* em是相對單位，相對父元素的 */width: 1em;height: 1em;/* 垂直對齊方式 */vertical-align: -0.15em;/* 填充：當前顏色 */fill: currentColor;/* 溢出隱藏 */overflow: hidden; ? ?} ?/* 可以通過寬高來設置圖標的大小也可以通過font-size來設置圖標的大小 ?*/ ?.icon {font-size: 100px;/* width: 200px;height: 200px; */ ?/* 改不了顏色 *//* color: tomato; *//* 無效 */font-weight: bold;} ?<!-- 第三步：挑選相應圖標并獲取類名，應用于頁面： --><!--<use xlink:href="#icon-xxx"></use>把xxx換成挑選的類名即可--> ? ?<!-- #icon-meinv --><svg class="icon" aria-hidden="true"><use xlink:href="#icon-meinv"></use></svg><!-- #icon-056-girl-1 --><svg class="icon" aria-hidden="true"><use xlink:href="#icon-056-girl-1"></use></svg><!-- #icon-wanghongshuaige --><svg class="icon" aria-hidden="true"><use xlink:href="#icon-wanghongshuaige"></use></svg><!-- #icon-paoche-xuanzhong --><svg class="icon" aria-hidden="true"><use xlink:href="#icon-paoche-xuanzhong"></use></svg> ?<!-- 支持色彩--> ?

總結

以上是生活随笔為你收集整理的阿里矢量图标如何引用详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。