前端使用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">