资讯专栏INFORMATION COLUMN

iconfont.cn 阿里出品的矢量图标库

刘厚水 / 687人阅读

摘要:是阿里巴巴推出的矢量图标库,其中涵盖了多个常用图标,并在持续更新中。目前已有图标,部分图标为用户上传,因此默认不公开,但是可以搜索到。下载图标制作模板图标制作规范项目主页编撰

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 阿里出品矢量图标

    摘要:是阿里巴巴推出的矢量图标库,其中涵盖了多个常用图标,并在持续更新中。目前已有图标,部分图标为用户上传,因此默认不公开,但是可以搜索到。下载图标制作模板图标制作规范项目主页编撰 Iconfont.cn是阿里巴巴推出的矢量图标库,其中涵盖了1000多个常用图标,并在持续更新中。(目前已有7000+图标,部分图标为用户上传,因此默认不公开,但是可以搜索到。) showImg(http://...

    wangtdgoodluck 评论0 收藏0
  • 阿里巴巴矢量图标Iconfont)-利于UI和前端搭配

    摘要:首先我们需要找到这个网站打开之后看到的首页大概是这个样子里面有搜索框,首先先是来找图标设计,里面图标大都是免费的,而且样式多种多样,打个比方我们搜索一个首页的图标。    前端时间,做一个小网站的时候,需要用到很多小图标,UI设计好之后不知道如何使用,如果使用图片那会很麻烦,相信一些前端更喜欢iconfont这样的标签直接调用,这样包括颜色和大小以及使用都更方便快捷,于是我们经过交流之后决定...

    goji 评论0 收藏0
  • 详细介绍vue项目中应用阿里巴巴矢量图标

    摘要:列表项目首先进入阿里巴巴矢量图标库的官方网址一选择其中一种方式登录。 列表项目 首先进入阿里巴巴矢量图标库的官方网址:http://www.iconfont.cn/home/i... 一、选择其中一种方式登录。 二、点击导航栏上面的图标管理新建项目 showImg(https://segmentfault.com/img/bVbhUnn?w=1228&h=242); 新建项目会弹出一个...

    roland_reed 评论0 收藏0
  • 我推荐一些前端开发工具

    摘要:性能卓越的模板引擎简洁的模版语法,简单的,关键还能前后端共用模板,简直就是前端开发利器。是由阿里巴巴部门推出的矢量图标管理网站。是一个简单的设备检测工具。 artTemplate 性能卓越的 js 模板引擎 简洁的模版语法,简单的API,关键还能前后端(Nodejs)共用模板,简直就是前端开发利器。今天有个想法,把artTemplate封装下,模版render后给input等注册几个事...

    nodejh 评论0 收藏0
  • CSS小技巧(一):iconfont使用

    摘要:已经被添加入库的图标会以虚线框起来,以鉴别是否重复选取。点击右上角的购物车小图标,选择添加至项目。创建项目并加入此新项目。将代码引入页面中,一般放在标签内即可。这是一种最新的引入方式,也是未来主流的方式。 在我们使用CSS对页面进行编辑布局时,经常会用到一些小图标或者logo。常见的比如我们在制作个人主页时,使用超链接图标来跳转到你的微博或其他页面等。这时候就会有一个很困扰的问题:去哪...

    baiy 评论0 收藏0

发表评论

0条评论

刘厚水

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<