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;}
- 选择图标、获取字体编码,应用于页面
<i class="iconfont">!</i>
Android应用
- 下载 demo代码
- 复制字体文件到项目 assets 目录
- 打开 iconfont 目录中的 demo.html,找到图标相对应的 HTML 实体字符码
- 打开 res/values/strings.xml,添加 string 值
<stringname="icons">㘅㖭㖮㖯</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。