摘要:是阿里巴巴推出的矢量图标库,其中涵盖了多个常用图标,并在持续更新中。目前已有图标,部分图标为用户上传,因此默认不公开,但是可以搜索到。下载图标制作模板图标制作规范项目主页编撰
Iconfont.cn是阿里巴巴推出的矢量图标库,其中涵盖了1000多个常用图标,并在持续更新中。(目前已有7000+图标,部分图标为用户上传,因此默认不公开,但是可以搜索到。)
Iconfont提供以下功能:
在线图标搜索
图标分捡下载
在线储存
矢量格式转换
图标库管理
iconfont的优势自由变化大小(高清屏无压力)
自由修改颜色(纯色)
可以添加一些视觉效果如:阴影、旋转、透明度
iconfont使用 网站
声明字体
@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"; font-size:16px;font-style:normal;}
选择图标、获取字体编码,应用于页面
!Android应用
下载 demo代码
复制字体文件到项目 assets 目录
打开 iconfont 目录中的 demo.html,找到图标相对应的 HTML 实体字符码
打开 res/values/strings.xml,添加 string 值
㘅 㖭 㖮 㖯
打开 activity_main.xml,添加 string 值到 TextView
为 TextView 指定文字
import android.graphics.Typeface; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Typeface iconfont = Typeface.createFromAsset(getAssets(), "iconfont/iconfont.ttf"); TextView textview = (TextView)findViewById(R.id.like); textview.setTypeface(iconfont); }iOS应用
下载demo代码
将字体文件(.tff)添加到工程中
打开Info.plist文件,增加一个新的Array类型的键,键名设置为UIAppFonts(Fonts provided by application),增加字体的文件名:iconfont.ttf
UILabel * label = [[UILabel alloc] initWithFrame:self.view.bounds]; UIFont *iconfont = [UIFont fontWithName:@"uxIconFont" size: 34]; label.font = iconfont; label.text = @"U00003439 U000035ad U000035ae U000035af U000035eb U000035ec"; [self.view addSubview: label];
注意:
创建 UIFont 使用的是字体名,而不是文件名
可以打开 demo.html 查找每个图标所对应的 HTML 实体 Unicode 码
iconfont制作如果图标库里没有合适的图标,你可以自行制作,然后将SVG文件上传到iconfont.cn。
下载图标制作模板.AI
图标制作规范
项目主页iconfont.cn
编撰 SegmentFault
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/12047.html
摘要:是阿里巴巴推出的矢量图标库,其中涵盖了多个常用图标,并在持续更新中。目前已有图标,部分图标为用户上传,因此默认不公开,但是可以搜索到。下载图标制作模板图标制作规范项目主页编撰 Iconfont.cn是阿里巴巴推出的矢量图标库,其中涵盖了1000多个常用图标,并在持续更新中。(目前已有7000+图标,部分图标为用户上传,因此默认不公开,但是可以搜索到。) showImg(http://...
摘要:首先我们需要找到这个网站打开之后看到的首页大概是这个样子里面有搜索框,首先先是来找图标设计,里面图标大都是免费的,而且样式多种多样,打个比方我们搜索一个首页的图标。 前端时间,做一个小网站的时候,需要用到很多小图标,UI设计好之后不知道如何使用,如果使用图片那会很麻烦,相信一些前端更喜欢iconfont这样的标签直接调用,这样包括颜色和大小以及使用都更方便快捷,于是我们经过交流之后决定...
摘要:列表项目首先进入阿里巴巴矢量图标库的官方网址一选择其中一种方式登录。 列表项目 首先进入阿里巴巴矢量图标库的官方网址:http://www.iconfont.cn/home/i... 一、选择其中一种方式登录。 二、点击导航栏上面的图标管理新建项目 showImg(https://segmentfault.com/img/bVbhUnn?w=1228&h=242); 新建项目会弹出一个...
摘要:性能卓越的模板引擎简洁的模版语法,简单的,关键还能前后端共用模板,简直就是前端开发利器。是由阿里巴巴部门推出的矢量图标管理网站。是一个简单的设备检测工具。 artTemplate 性能卓越的 js 模板引擎 简洁的模版语法,简单的API,关键还能前后端(Nodejs)共用模板,简直就是前端开发利器。今天有个想法,把artTemplate封装下,模版render后给input等注册几个事...
摘要:已经被添加入库的图标会以虚线框起来,以鉴别是否重复选取。点击右上角的购物车小图标,选择添加至项目。创建项目并加入此新项目。将代码引入页面中,一般放在标签内即可。这是一种最新的引入方式,也是未来主流的方式。 在我们使用CSS对页面进行编辑布局时,经常会用到一些小图标或者logo。常见的比如我们在制作个人主页时,使用超链接图标来跳转到你的微博或其他页面等。这时候就会有一个很困扰的问题:去哪...
阅读 2130·2021-11-25 09:43
阅读 461·2021-11-24 09:39
阅读 3336·2019-08-30 15:53
阅读 2367·2019-08-30 15:44
阅读 3126·2019-08-30 12:54
阅读 2107·2019-08-29 12:23
阅读 3418·2019-08-27 11:06
阅读 3168·2019-08-26 14:05