iconfont是阿里巴巴MUX创建的矢量图标平台。

有了图书馆，您就没有什么可以要求的了。所有图标都包含在内！

设计师可以将图标上传到Iconfont平台，用户可以自定义图标并以多种格式下载，该平台还可以将图标转换为前端工程师可以自由调整和调用的字体。

截至目前，阿里巴巴各平台及用户已上传超过220万个图标，支持SVG、AI、PNG格式。下载前您必须登录您的帐户。支持Github、阿里巴巴域帐号（仅限阿里巴巴员工）、新浪微博登录。

该平台有四个库

官方图标库

多色图标库

单色图标库

所有图标库

官方图标库

包含几乎所有阿里巴巴平台项目的图标

多色图标库

主要是一系列彩色图标，支持中英文搜索

单色图标库

所有颜色鲜艳的图标

所有图标库

包含以上三类的图库

使用方面，支持Web、Android、Apple使用。

web端使用

用户可以在iconfont.cn下载多种格式的图标，平台还支持将图标转换为字体，方便前端工程师随意调整和调用图标。

图标一次性

用户可以选择为一个图标下载不同的格式，如png、ai、svg 等。

单击下载按钮并选择下载图标。

这种方式适用于图标引用很少且日后不需要专门维护的场景。

例如，设计人员使用它来制作演示原型。

在前端创建一个临时活动页面。

当然，如果您只是想下载PPT 的图标，它也是完美的。

但是，如果要在系统应用中使用，我们建议您将图标添加到您的项目中，然后使用以下三种推荐方法。

统一码参考

Unicode 是在网页上应用字体的最原始的方式。其特点是：

最佳兼容性，支持IE6及以上版本以及所有现代浏览器。

支持根据字体动态调整图标大小、颜色等。

但是，由于它是一种字体，因此不支持多种颜色。只能使用平台内的纯色图标。即使您的项目中有多个彩色图标，颜色也会自动删除。

注意：较新版本的iconfont 支持多色图标。我们建议您在适当的时候对这些多色图标使用符号引用方法。

使用Unicode 的步骤如下：

第1 步：将生成的字体复制到项目下方

@font-face {font-family: 'iconfont'; src: url('iconfont.eot'); src: url('embedded-opentype'), url('iconfont.woff') 格式('woff'), url(' iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg');} 步骤2：使用iconfont 定义样式

.iconfont{ font-family:'iconfont' ! important; font-style: antialiasing -webkit-text-行程宽度： 0.2px;第三步：选择对应的图标获取字体编码并添加到页面应用中。

i class='iconfont'#x33;/ifont 类参考

字体类是Unicode 的一种使用方式，主要解决Unicode 书写不直观、语义不清晰的问题。

与使用Unicode相比，它具有以下特点：

兼容性强，支持ie8+及所有现代浏览器。

与Unicode相比，它的语义更清晰，书写起来也更直观。很容易看出这个图标是什么。

类用于定义图标，因此如果要替换图标，只需更改类中的Unicode 引用即可。

但是，由于仍在使用字体，因此尚不支持多色图标。

使用流程如下。

第1 步：将生成的字体类代码复制到您的项目下面。

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css第2步：选择相应的图标以获取类名并将其应用到页面。

参见i class='iconfont icon-xxx'/isymbol

这是一种全新的使用方式，也是目前主流且推荐的平台使用方式。相关介绍请参见这篇文章。在实际应用中，这种用法与上面两种相比有以下特点：

现在支持多色图标，不再局限于单一颜色。

使用一些技巧来支持类似的字体。

字体大小

，颜色

调整你的风格。兼容性低，支持ie9及更新的浏览器。

浏览器svg渲染性能一般，不如png。

使用流程如下。

步骤1：将生成的符号代码复制到您的项目下。

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js第2步：添加通用CSS代码（仅部署一次）：

style type='text/css' .icon { width: 1em; height: 1em;vertical-align: currentColor }/style 第三步：选择对应的图标并应用到页面上。

svg class='icon' aria-hidden='true' use xlink:href='#icon-xxx'/use/svg

Android使用

ndroid 可以直接使用单个图标（svg、png）。您还可以直接导入字体应用程序。

步骤1：从iconfont平台中选择您要使用的图标，并将字体文件复制到项目的assets目录中。

步骤2：打开从iconfont平台下载的文件，打开目录下的demo.html，找到图标对应的HTML实体的字符编码。

步骤3：打开res/values/strings.xml 并添加字符串值。

string name='icons'#x3605; #x35ad; #x35af;/string 步骤4：打开Activity_main.xml 并将字符串值添加到TextView。

TextView android:id='././+id/like' android:layout_width='wrap_content' android:layout_height='wrap_content' android:text='././string/icons' /Step 5: 指定TextView的文本。

导入android.graphics.Typeface;protected void onCreate(Bundle SavedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); 字体iconfont=Typeface.createFromAsset(getAssets(), 'iconfont/iconfont.ttf') ; TextView 文本视图=(TextView)findViewById(R.id.like);}

IOS使用

IOS可以直接使用单个图标（svg、png）。您还可以直接导入字体应用程序。

步骤1：将从IconFont 平台下载的字体文件(.ttf) 添加到您的项目中。

打开Info.plist文件，添加一个新的数组类型键，设置键名称为UIAppFonts（应用程序提供的字体），并添加字体文件名“iconfont.ttf”。

步骤2：使用IconFont字体：

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 是使用字体名称而不是文件名创建的。

文本值是8位Unicode字符。打开demo.html 并找到与每个图标对应的HTML 实体的Unicode 代码。转换后，“shop”对应的HTML实体的Unicode代码为0x3439。为：\U00003439，表示转换为0x。将其替换为\U 并用零填充，使其总长度为8 个字符。

版权声明：本文转载于网络，版权归作者所有。如有侵权，请联系本站编辑删除。