阿里巴巴矢量图的使用

博主在看到阿里巴巴的网站时发现购物车前面的图标不是用img来做的，是用阿里巴巴的矢量图来做的。接下来介绍一下，关于阿里巴巴矢量图的使用方法。
1.首先进入网站
http://www.iconfont.cn/
2.在输入框中输入自己需要的图标

比如输入：购物车
3.添加入库

4.单击购物车图标的按钮，如图所示

点击添加至项目，创建一个项目名。这里可能会让你登录账号，所以登录账号就行。
5.编码方式选择”unicode”编码，这里我添加了多个图标，再点击”下载至本地”

6.将下载完的文件解压后，放到某一文件夹中，右键打开demo_unicode.html文件

7.把上述文件中的代码复制到自己的项目中

  @font-face {font-family:"iconfont";src:url('iconfont.eot'); /* IE9*/src:url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */url('iconfont.woff') format('woff'), /* chrome, firefox */url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */}.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;}

特别提醒：src中的地址要注意别写错

 <i class="icon iconfont">&#xe600;</i><div class="name">购物车</div><div class="code">&amp;#xe600;</div></li>

上面i标签中的class值就是上面样式中的class。

以上，具体内容还需要自己摸索。

阿里巴巴矢量图的使用相关推荐

VUE 项目图标全部替换成阿里巴巴矢量图
我们在做vue项目时,发现vue里的图标不能满足我们项目的需求,我们就需要去阿里巴巴矢量图里下载了. 阿里巴巴矢量图库中有两种格式的图标如下图第一个Unicode 样式,vue的使用方法如下第二个 ...
7步搞定阿里巴巴矢量图
1.进入阿里巴巴矢量图官网 http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 2.注册.登录 3.按图操作 4.将自己上 ...
使用uni-app引入阿里巴巴矢量图以及出现小长方形解决方法
首先就是下载阿里巴巴矢量图,不知道怎么用的可以去看一下这篇文章webpack打包font文字目录下的06篇如果是在pages.json文件下引入图标可以使用第一种(Unicode)引入引入时需要把 ...
uniapp 引入阿里巴巴矢量图（最新）
1.先在阿里巴巴矢量图网站添加自己喜欢的图标(网址:iconfont-阿里巴巴矢量图标库) 每完成红箭头的第一步右上角购物车会增加一条 2.选择完成后,点击右上角的购物车会出现以下界面 3.选择添加 ...
阿里巴巴矢量图的使用方法详细教程
1.在浏览器搜索阿里巴巴矢量图标库,进入官网后需要先登录,用微博登录就可以. 2.登陆成功后,在首页输入关键字搜索 3.加入购物车,点击购物车,添加至项目,新建项目,添加至新建的项目 4.添加项目之后 ...
icon font阿里巴巴矢量图引进文件 css
可以引用线上生成链接,也可以下载本地引用本地文件 1. 进官网阿里巴巴矢量图库查找需要的logo 2. 将需要的logo添加入库 3. 将购物车内项目添加进项目,没有就新建 4. 去我的项目 5. ...
【web前端---阿里巴巴矢量图图库图标引用步骤】
看完不会用请打我三巴掌.如果会用就动一动你发财的小手点赞收藏一下呗
如何通过cdn方式使用阿里巴巴矢量图字体文件
各种icon图标（阿里巴巴矢量图）
http://www.iconfont.cn/plus/home/index?spm=a313x.7781069.1998910419.2.RGM5pd

阿里巴巴矢量图的使用

阿里巴巴矢量图的使用相关推荐

最新文章

热门文章