Iconfont-阿里巴巴矢量图标库

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

Iconfont提供以下功能:

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

iconfont的优势

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

T1fKdbFvtcXXb1upjX (1)

iconfont使用

网站

  1. 声明字体
    @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- */
    }
  2. 定义样式
    .iconfont{font-family:"iconfont";
    font-size:16px;font-style:normal;}
  3. 选择图标、获取字体编码,应用于页面
    <i class="iconfont">&#33</i>

Android应用

  1. 下载?demo代码
  2. 复制字体文件到项目 assets 目录
  3. 打开 iconfont 目录中的 demo.html,找到图标相对应的 HTML 实体字符码
  4. 打开 res/values/strings.xml,添加 string 值
    <string name="icons">&#x3605; &#x35ad; &#x35ae; &#x35af;</string>
    
  5. 打开 activity_main.xml,添加 string 值到 TextView
    <TextView
        android:id="@+id/like"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/icons" />
  6. 为 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应用

  1. 下载demo代码
  2. 将字体文件(.tff)添加到工程中
  3. 打开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

项目主页

iconfont.cn

 

更多链接

设计师png透明图标下载教程:http://v.youku.com/v_show/id_XNjMxNTgwMzU2.html
矢量图标视频教程:http://v.youku.com/v_show/id_XNjM0MzQ4ODMy.html
iconfont官方微博:http://weibo.com/iconfont/home?wvr=5

赞(0) 打赏
未经允许不得转载:WEB前端开发 » Iconfont-阿里巴巴矢量图标库

评论 4

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    这个我用怎么在ie6-ie8都是乱码啊,谁能告诉我怎么回事吗!

    鼓捣5年前 (2014-06-30)回复
  2. #-48

    都是从上面下载下来的demo啊··难道不支持ie6-ie8吗?

    鼓捣5年前 (2014-06-30)回复
  3. #-47

    其实下载下来的阿里巴巴iconfont图标引用方式,大多数的情况下是不可用的。存在无法解析路径问题。
    所以,图标就会出现小方框

    解决办法如下
    @font-face {
    font-family: “iconfont”;
    src:url(‘../fonts/iconfont.eot’), /* IE9*/
    url(‘../fonts/iconfont.eot’) format(’embedded-opentype’), /* IE6-IE8 */
    url(‘../fonts/iconfont.woff’) format(‘woff’), /* chrome, firefox */
    url(‘../fonts/iconfont.ttf’) format(‘truetype’), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url(‘../fonts/iconfont.svg’) format(‘svg’); /* iOS 4.1- */
    }

    丁少华3年前 (2016-07-05)回复
  4. #-46

    谢谢,解决了我的困惑!

    itcong2年前 (2017-02-09)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏