Iconfont-阿里巴巴矢量图标库

传送门：Iconfont-阿里巴巴矢量图标库

Iconfont-阿里巴巴矢量图标库（https://www.iconfont.cn/），顾名思义就是一个矢量图标库，简直就是设计师的必备神器，非常实用。现在Iconfont图标数量已经超过千万了，意思就是你想要啥都有，搜一下轻轻松松找到。

Iconfont功能介绍

1、支持关键词模糊搜索，可以搜图标搜用户，中文 / English / Pinyin 无缝互译；

2、下载详情页：可查阅icon归属图标库与作者，多色图标支持分路径改色，下载图标自动保存最近使用的颜色；

3、购物车：将图标加入购物车后，可以批量下载素材和代码、批量添加至项目；

4、支持单个或批量上传多个icon、支持单色/多色icon同时上传、支持图标自定义配置标签；

5、图标库是一系列相关图标的集合，由图标上传者创建，需通过审核才可公开/加密访问 图标库分为官方图标库/自定义图标库/多色图标库；

6、“项目”是帮助团队协同合作的共享模块，创建项目后，视觉同学上传icon，交互/产品同学可以⾃自由下载图标，前端同学可以将图标以字体格式添加至代码，支持三种格式代码使用；

7、支持原创图标，尊重设计成果，在“用户”与“图标库”维度支持打赏，如果你喜欢哪位设计师，赶快去打赏吧～

Iconfont的优势

1、自由变化大小（高清屏无压力）；

2、自由修改颜色（纯色）；

3、可以添加一些视觉效果如：阴影、旋转、透明度；

Iconfont使用

网站

1、声明字体

@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- */
}

2、定义样式

.iconfont{font-family:"iconfont";
font-size:16px;font-style:normal;}

3、选择图标、获取字体编码，应用于页面

<i class="iconfont">&#33</i>

Android应用

1、下载demo代码；

2、复制字体文件到项目 assets 目录；

3、打开 iconfont 目录中的 demo.html，找到图标相对应的 HTML 实体字符码；

4、打开 res/values/strings.xml，添加 string 值；

<string name="icons">&#x3605; &#x35ad; &#x35ae; &#x35af;</string>

5、打开 activity_main.xml，添加 string 值到 TextView

<TextView
android:id="@+id/like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/icons" />

6、为 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应用

1、下载demo代码；

2、将字体文件(.tff)添加到工程中；

3、打开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 码。