阿里巴巴矢量图标库的使用

发布时间:2020-07-01 20:47:06 作者:小小金丫
来源:网络 阅读:846

1,打开阿里巴巴矢量图标库

http://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.da2e3581b&type=1

2,选择需要的图标加入购物车;

3,将购物车中的图标加入本地项目;

第一种方法:

(1)获取在线链接,将获取到的在线链接复制到编辑器css文件;

(2)<i class="iconfont">unicode<i/><i class="iconfont">&#xe64c;</i>

第二种方法:

(1)点击暂存架的下载至本地,解压待用;

(2)打开下载包中的demo.html,按照demo的步骤,配置ionic的项目;

(3)静态文件存放目录,新建font文件夹用来存放字体文件(可自定义存放);

(4)css使用font-face声明字体;

(5)css定义使用iconfont的样式;

(6)挑选相应图标并获取字体编码,应用于页面就可以显示图标啦

第三种方法:

(1)同第二种方法,只是使用方法不同

(2)Ionic的图标只要加个类似ion-happy  ion-XXX的class就可以应用相应的图标;

(3)将那些.icon-XXX:before{content:'XXXX'}也复制到你的css文件中去

(4)只要在class中加 iconfont  icon-XXX就可以使用图标了;



推荐阅读:
  1. 为什么阿里巴巴抛弃Hibernate使用MyBatis框架?
  2. 使用GDAL怎么修改矢量属性数据

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

使用 前端 图标

上一篇:04 安全架构设计师成长路上的三维坐标系

下一篇:服务器硬件故障排查

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》