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