很多从事互联网行业都会使用到矢量图标素材,那么部分矢量图标素材在哪里可以找到并下载呢?今天博主推荐由阿里巴巴体验团队打造的矢量图标库,目前改图标库有8,647,869图标素材,大量设计师还在持续为图库增加新素材。
官网直达:点击查看
web端使用
用户在iconfont.cn可以下载,多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。
icon单个使用
单个图标用户可以自行选择下载不同的格式使用,包括png,ai,svg。
点击下载按钮,可以选择下载图标。
此种方式适合用在图标引用特别少,以后也不需要特别维护的场景。
- 比如设计师用来做demo原型。
- 前端临时做个活动页。
- 当然如果你只是为了下载图标做PPT,也是极好的。
不过如果是成体系的应用使用,建议用户把icon加入项目,然后使用下面三种推荐的方式。
unicode引用
unicode是字体在网页端最原始的应用方式,特点是:
- 兼容性最好,支持ie6+,及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式
unicode使用步骤如下:
第一步:拷贝项目下面生成的font-face
@font-face {font-family: <span class="hljs-string">'iconfont'</span>;
src: url(<span class="hljs-string">'iconfont.eot'</span>);
src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
}
第二步:定义使用iconfont的样式
.iconfont{
font-family:<span class="hljs-string">"iconfont"</span> !important;
font-size:<span class="hljs-number">16</span>px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
-moz-osx-font-smoothing: grayscale;}
第三步:挑选相应图标并获取字体编码,应用于页面
<i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>>&#x33;<span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span>
font-class引用
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。
与unicode使用方式相比,具有如下特点:
- 兼容性良好,支持ie8+,及所有现代浏览器。
- 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
- 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
- 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
使用步骤如下:
第一步:拷贝项目下面生成的fontclass代码:
<span class="hljs-comment">//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css</span>
第二步:挑选相应图标并获取类名,应用于页面:
<<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"></<span class="hljs-selector-tag">i</span>>
symbol引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与上面两种相比具有如下特点:
- 支持多色图标了,不再受单色限制。
- 通过一些技巧,支持像字体那样,通过
font-size
,color
来调整样式。 - 兼容性较差,支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般,还不如png。
使用步骤如下:
第一步:拷贝项目下面生成的symbol代码:
<span class="hljs-comment">//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js</span>
第二步:加入通用css代码(引入一次就行):
<style type=<span class="hljs-string">"text/css"</span>>
.icon {
width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
vertical-align: <span class="hljs-number">-0.15</span>em;
fill: currentColor;
overflow: hidden;
}
<<span class="hljs-regexp">/style>
</span>
第三步:挑选相应图标并获取类名,应用于页面:
<svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>>
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>></span><span class="hljs-tag"></<span class="hljs-name">use</span>></span></span>
<<span class="hljs-regexp">/svg></span>
Android使用
android可以直接使用单个icon(svg,png)。也可以直接引入字体应用:
第一步:从iconfont平台选择要使用到的图标,并下载至本地;复制字体文件到项目 assets 目录
第二步:打开从iconfont平台下载下来的文件,并在目录中打开demo.html,找到图标相对应的 HTML 实体字符码;
第三步:打开 res/values/strings.xml,添加 string 值;
<span class="hljs-tag"><<span class="hljs-name">string</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"icons"</span>></span>&#x3605; &#x35ad; &#x35ae; &#x35af;<span class="hljs-tag"></<span class="hljs-name">string</span>></span>
第四步:打开 activity_main.xml,添加 string 值到 TextView:
<span class="hljs-tag"><<span class="hljs-name">TextView</span>
<span class="hljs-attr">android:id</span>=<span class="hljs-string">"../../+id/like"</span>
<span class="hljs-attr">android:layout_width</span>=<span class="hljs-string">"wrap_content"</span>
<span class="hljs-attr">android:layout_height</span>=<span class="hljs-string">"wrap_content"</span>
<span class="hljs-attr">android:text</span>=<span class="hljs-string">"../../string/icons"</span> /></span>
第五步:为 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使用
IOS可以直接使用单个icon(svg,png)。也可以直接引入字体应用:
第一步:将您从IconFont平台下载的字体文件(.ttf)添加到工程中;
打开Info.plist文件,增加一个新的Array类型的键,键名设置为UIAppFonts(Fonts provided by application),增加字体的文件名:“iconfont.ttf“
第二步:使用IconFont字体:
<span class="hljs-built_in">UILabel</span> * label = [[<span class="hljs-built_in">UILabel</span> alloc] initWithFrame:<span class="hljs-keyword">self</span>.view.bounds];
<span class="hljs-built_in">UIFont</span> *iconfont = [<span class="hljs-built_in">UIFont</span> fontWithName:@<span class="hljs-string">"uxIconFont"</span> size: <span class="hljs-number">34</span>];
label.font = iconfont;
label.text = @<span class="hljs-string">"\U00003439 \U000035ad \U000035ae \U000035af \U000035eb \U000035ec"</span>;
[<span class="hljs-keyword">self</span>.view addSubview: label];
这里有两个地方注意下:
- 创建 UIFont 使用的是字体名,而不是文件名;
- 文本值为 8 位的 Unicode 字符,我们可以打开 demo.html 查找每个图标所对应的 HTML 实体 Unicode 码,比如: "店" 对应的 HTML 实体 Unicode 码为:0x3439 转换后为:\U00003439 就是将 0x 替换为 \U 中间用 0 填补满长度为 8 个字符