阿里妈妈矢量图标使用
来源:互联网 发布:学完c 还是不会编程 编辑:程序博客网 时间:2024/04/30 22:01
1.登陆 http://www.iconfont.cn/ 阿里妈妈矢量图标库
2.登陆,可以使用GitHub账号或者其他账号登陆
3.选择将要使用的主题图标,或者在搜索栏里面搜索需要的图标
4.将需要选择的图标放到购物车(添加入库)——》选择以后点击右上方的购物车图标—–》添加至项目—-》如果没有项目名的话, 建一个项目的名字—-》点击确定—-》下载至本地—》解压就可以用。
5.本地使用有三种方式,分别在下载的三个demo里面,可以查看具体的使用方法。
font-class引用
第一步:引入项目下面生成的fontclass代码:
第二步:挑选相应图标并获取类名,应用于页面:
symbol引用
第一步:引入项目下面生成的symbol代码:
第二步:加入通用css代码(引入一次就行):
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
第三步:挑选相应图标并获取类名,应用于页面:
unicode引用
unicode使用步骤如下:
第一步:拷贝项目下面生成的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;
}
第三步:挑选相应图标并获取字体编码,应用于页面
3
官网的使用说明,包括安卓和ios的使用说明
http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8d11a391&helptype=code
也可以在线使用,或者制作,具体参照官网
- 阿里妈妈矢量图标使用
- 阿里妈妈字体图标(iconfont)使用介绍
- 使用WebBrowser自动登录阿里妈妈网站
- 阿里云和Azure ICON图标矢量素材分享
- 阿里iconfont官网提供的矢量图标用法介绍
- 阿里iconfont图标使用
- Android:使用矢量图标(iconfont方式)
- CSS3 iconfont矢量字体图标的使用
- 如何使用IconFont?——矢量图标
- 矢量图标,图标字体的使用,font awesome
- 阿里妈妈alimama广告平台购买使用心得
- 微信小程序如何使用阿里妈妈iconfont图标库
- 阿里妈妈还是阿里后妈
- 阿里妈妈还是阿里后妈
- 阿里妈妈的广告
- 阿里妈妈站长工具
- 阿里妈妈广告
- 阿里妈妈广告
- 使用Xshell通过堡垒机登陆Linux
- ConfigReader(三十二)—— ReadIGuideTaskManagerConfig
- LeetCode695:Max Area of Island 解答
- 如何在visual Studio 2015里面查看unity3d 源码(ReSharper插件反编译出来的==Reflector.exe解析dll效果类似)
- 怎么让VS2015编写的程序在XP中顺利运行
- 阿里妈妈矢量图标使用
- 基于Bmob云平台的android写日记带提醒功能
- Android 仿微信图片选择器以及图片预览踩的坑
- Lambda表达式基本语法与应用
- Effective Java 读书笔记(十):序列化
- 【Unity3d】百度AI人脸识别实例——描绘人脸特征点
- HDU 2669 Romantic
- 初识推荐系统
- Unity优化杂谈5(代码优化)