阿里图标库iconfont如何使用

1、在阿里图标库（http://iconfont.cn/）选择自己喜欢的一个或多个图标，效果如下图所示

2、网页右上角的小购物车，

3、这里我们选择下载代码。下载好了后在项目需要的地方解压。

4、这是我下载好的压缩文件以及解压后的文件。

5、下载好了以后，会看到有三个html文件，我们用浏览器打开，他是三种引入图标的方法，我们根据自己的需要自行选择。

6、举例子来说，我个人喜欢用

新建一个文件夹，名字自己取吧！我的叫font，放入这四个文件。与font平级的放iconfont.css

html中的style：

.iconfont{ color: blue; }
           @font-face {
           font-family: 'iconfont';
           src: url('font/iconfont.eot');
           src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
           url('font/iconfont.woff') format('woff'),
           url('font/iconfont.ttf') format('truetype'),
           url('font/iconfont.svg#iconfont') format('svg');
           }
           .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;
           }

body中

这些图标都可以当成font来处理，改颜色大小之类的，都和文字一样。

阿里图标库iconfont如何使用相关推荐

java怎么引入矢量图标库,阿里图标库怎么使用?阿里图标库iconfont如何使用
阿里图标库怎么使用?阿里图标库iconfont如何使用网际网络测评网络评测 2020-3-17 2581 0评论阿里图标库Iconfont-国内功能很强大且图标内容很丰富 ...
png转iconfont_关于阿里图标库Iconfont生成图标的三种使用方式-新闻详情
关于阿里图标库Iconfont生成图标的三种使用方式发布时间:2017-07-28责任编辑:朱明浏览:1843 相信做过前端的都知道阿里巴巴矢量图标库,这是一个非常好用的添加小图标的方法,而且是完 ...
开发辅助 | 阿里图标库iconfont入门使用
目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...
vue中阿里图标库iconfont的设置
步骤基本使用 1 下载存放从阿里图标库中下载压缩包,解压开目录如下在vue项目的assets下创建font文件夹,把这些文件复制到font文件夹下,为了有条理再创建styles文件夹,目录如下 ...
uniapp使用阿里图标库iconfont
1.在阿里图标库中找到自己要使用的图标并加入项目: iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴 ...
在微信小程序中使用阿里图标库Iconfont
点击 '下载至本地',并解压文件夹把这几个文件放在小程序项目中, 在app.wxss(图片上用的是taro和taro-UI框架的格式)中引入iconfont.css,然后其他地方就可以使用了
iconfont 图标转为字体_阿里字体库iconfont使用方法
天兴工作室之前写过一篇"zblog使用Font Awesome图标字体教程",然后发现"Font Awesome"太臃肿了,一个主题根本用不了这么多图标,图标样 ...
使用在线链接阿里图标库（iconfont）(vue)
1.阿里图标库网址 https://www.iconfont.cn/ 2.搜索–>图标名称–>鼠标移入图标->加入购物车–>点击购物车–>添加至项目 2.点击Font c ...
vue+element 使用iconfont (阿里图标库)
步骤一(找到自己要引入的图标,如果已经找到只是不会引入,请直接查看步骤二): 准备:首先进入阿里图标库,登录自己的账号,在下图位置输入想搜索的图标,例如:'退出' 随便选一个自己想要的如图把鼠标移动 ...

阿里图标库iconfont如何使用

阿里图标库iconfont如何使用相关推荐

最新文章

热门文章