Iconfont

Web前端开发 • 10年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

Iconfont.cn是阿里巴巴推出的矢量图标库，其中涵盖了1000多个常用图标，并在持续更新中。（目前已有7000+图标，部分图标为用户上传，因此默认不公开，但是可以搜索到。）

Iconfont提供以下功能：

在线图标搜索
图标分捡下载
在线储存
矢量格式转换
图标库管理

iconfont的优势

自由变化大小（高清屏无压力）
自由修改颜色（纯色）
可以添加一些视觉效果如：阴影、旋转、透明度

T1fKdbFvtcXXb1upjX (1)

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

定义样式

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

选择图标、获取字体编码，应用于页面
1
<i class="iconfont">&#33</i>

Android应用

下载 demo代码
复制字体文件到项目 assets 目录
打开 iconfont 目录中的 demo.html，找到图标相对应的 HTML 实体字符码

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

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

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

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

为 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