Iconfont-阿里巴巴矢量图标库
Iconfont-阿里巴巴矢量图标库
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>!</i>
Android应用
下载?demo代码
复制字体文件到项目 assets 目录
打开 iconfont 目录中的 demo.html,找到图标相对应的 HTML 实体字符码
打开 res/values/strings.xml,添加 string 值
<string name="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 码