前端使用icon矢量圖標

前端中網站使用的圖標,看着很像圖片,但是他其實算是一種字符,例如淘寶中的購物車圖標還有搜索圖標.

 

咱們若是要使用的話,不用怕.Iconfont-阿里巴巴矢量圖標庫https://www.iconfont.cn/ 這個網站已經為我們准備好了.

今天我就來把插入方法說一下.

先說下使用方法吧,

進入網站后,點擊代碼應用有詳細的方法說明

有3種方法,我一般就是使用常用的一種

unicode引用

1.先將想要的圖標點擊小購物車按鈕添加

2.再將添加了購物車的這一些圖標添加進一個項目中,這樣你用的時候,就可以一起導入

 

3.在我的項目中點擊下載到本地

4.將下載下來的壓縮包解壓

5.將下面代碼復制到css中,將url的路徑更改為實際相對路徑

//第一步：拷貝項目下面生成的font-face

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}
//第二步：定義使用iconfont的樣式

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

　　6.應用方法

編碼在圖標下面就可以找到

第一種是直接添加<i>標簽不是固定的,只是因為使用icon,所以使用<i>標簽容易分辨

挑選相應圖標並獲取字體編碼，應用於頁面

<i class="iconfont">&#xe628;</i>

在submit或button按鈕中,若是想把值用矢量圖標的話 ,可以使用定位,但是太麻煩,我們也可以使用添加

<input type="submit" value='' class="iconfont">