阿里矢量图标引入方法
一、阿里矢量圖標(字體圖標)
網址：iconfont-阿里巴巴矢量圖標庫
1.使用步驟
1.登錄阿里矢量圖標網站
2.搜索想要的圖標且加到購物車
3.點擊右上角的購物車
4.選擇下載代碼，下載完成后解壓文件
5.把下載的文件放到你的項目中
6.引入iconfont.css文件或者iconfont.js文件
使用三種方式：下載代碼
1、Unicode 方式引用
Unicode 是字體在網頁端最原始的應用方式，特點是：
- 兼容性最好，支持 IE6+，及所有現代瀏覽器。
- 支持按字體的方式去動態調整圖標大小，顏色等等。
- 但是因為是字體，所以不支持多色。只能使用平臺里單色的圖標，就算項目里有多色圖標也會自動去色。
注意：新版 iconfont 支持多色圖標，這些多色圖標在 Unicode 模式下將不能使用，如果有需求建議使用symbol 的引用方式
使用步驟如下：
第一步：引入項目下面生成的 fontclass 代碼：
<link rel="stylesheet" href="./iconfont.css">第二步：挑選相應圖標并獲取字體編碼，應用于頁面
<span?class="iconfont">3</span>2、font-class 方式引用
font-class 是 Unicode 使用方式的一種變種，主要是解決 Unicode 書寫不直觀，語意不明確的問題。
與 Unicode 使用方式相比，具有如下特點：
- 兼容性良好，支持 IE8+，及所有現代瀏覽器。
- 相比于 Unicode 語意明確，書寫更直觀。可以很容易分辨這個 icon 是什么。
- 因為使用 class 來定義圖標，所以當要替換圖標時，只需要修改 class 里面的 Unicode 引用。
- 不過因為本質上還是使用的字體，所以多色圖標還是不支持的。
使用步驟如下：
第一步：引入項目下面生成的 fontclass 代碼：
<link?rel="stylesheet"?href="./iconfont.css">第二步：挑選相應圖標并獲取類名，應用于頁面：
<span?class="iconfont icon-xxx"></span>" iconfont" 是你項目下的 font-family。可以通過編輯項目查看，默認是 "iconfont"。
3、Symbol方式引用
這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。相關介紹可以參考這篇文章?這種用法其實是做了一個 SVG 的集合，與另外兩種相比具有如下特點：
- 支持多色圖標了，不再受單色限制。
- 通過一些技巧，支持像字體那樣，通過?font-size,?color?來調整樣式。
- 兼容性較差，支持 IE9+，及現代瀏覽器。
- 瀏覽器渲染 SVG 的性能一般，還不如 png。
使用步驟如下：
第一步：引入項目下面生成的 symbol 代碼：
<script?src="./iconfont.js"></script>第二步：加入通用 CSS 代碼（引入一次就行）：
<style> .icon?{width:?1em;height:?1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden; } //改變樣式.icon{width:?100px;height:?100px;font-size:?20px;?display: block;} </style>第三步：挑選相應圖標并獲取類名，應用于頁面：
<svg?class="icon"?aria-hidden="true"><use?xlink:href="#icon-xxx"></use> </svg>2.引入字體圖標第二種方式：添加至項目
項目引入：1.選好圖標添加至項目2.選擇要添加的項目（如果沒有項目點擊右上角新建項目），點擊確定3.下載至本地4.解壓文件，把文件放到代碼中5.正常使用添加新的圖標1.把新的圖標選好之后，點擊添加項目，選擇你要添加的項目2.下載至本地3.解壓文件，把文件放到代碼中(此時下載的這個文件包括上次選的圖標，也包括這次選的新的圖標)4.正常使用添加新的圖標下載文件后，把原來的文件替換掉，再把iconfont.css和iconfont.js文件鏈接替換一下即可與下載代碼的區別：下載代碼：如果添加新的圖標，需要再新下載一個文件，且這個文件的圖標與上個文件的圖標不能在一個文件中，是兩個獨立的文件項目引入：如果添加新的圖標，可以把這些圖標添加到已有的項目文件，這樣原來的圖標和這次新添加的圖標就可以在新的一個文件里了二、文本溢出處理顯示省略號
1、單行文本溢出顯示省略號
方法1：省略號
單行文本：
width：200px；設置盒子的寬度(限制寬度)
white-space：nowrap；設置文本不換行
overflow：hidden；溢出隱藏
text-overflow：ellipsis；文本溢出的顯示省略號
方法2：偽元素
??<style>.box?{width:?200px;height:?40px;line-height:?40px;background-color: orchid;overflow: hidden;/* 溢出隱藏 */white-space: nowrap;/* 強制不換行 */position: relative;/* 子絕父相 */}.box:after {content:?"...";position: absolute;right:?0px;bottom:?0px;/* 設置寬度可以微調省略號的盒子大小，蓋住多余的文字 */width:?20px;background-color: red;}</style> </head><body><div?class="box">可以沉迷，可以抱怨，可以奔潰，可以抱怨，可以奔潰，人要有自愈能力</div> </body>2、多行文本溢出顯示省略號
方法1：偽元素
<style>.box?{width:?200px;/* 通過行高和高度控制顯示的行數 */height:?120px;line-height:?30px;background-color: red;position: relative;/* 文本兩端對齊方式 */text-align: justify;/* 溢出隱藏 */overflow: hidden;}.box:after {content:?"...";position: absolute;right:?0;bottom:?0;background-color: red;/* 設置寬度可以微調省略號的盒子大小，蓋住多余的文字 */width:?20px;background-color: red;} </style> <body><div?class="box">MONTBLANC萬寶龍 男士經典系列橢圓形針扣皮帶/腰男士經典系列橢圓形針扣皮帶男士經典系列橢圓形針扣皮帶男士經典系列橢圓形針扣皮帶帶 38157</div> </body>說明：
方法2：彈性盒
? width：200px；設置盒子的寬度(限制寬度)
? display：-webkit-box；將對象作為彈性伸縮盒子模型顯示
? -webkit-line-clamp：2；用來限制在一個快元素顯示的文本行數
? -webkit-box-orient：vertical；設置盒子子元素的排列方式
? overflow：hidden；溢出隱藏
???<style>.box2?{width:?200px;line-height:?30px;background-color: pink;/* 舊版彈性盒 */display: -webkit-box;/* 彈性盒子元素垂直排列 */-webkit-box-orient: vertical;/* 控制要顯示的行數 */-webkit-line-clamp:?4;/* 溢出隱藏 */overflow: hidden;}</style><body><div?class="box2">可以沉迷，可以抱怨，可以奔潰，，可以抱怨，可以奔潰，人要有自愈能力可以沉迷，可以抱怨，可以奔潰，，可以抱怨，可以奔潰，人要有自愈能力</div> </body>總結
以上是生活随笔為你收集整理的阿里矢量图标引入方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： BundleFusion代码框架讲解
- 下一篇： Deque - leetcode 【双端