showjoy iconFont 使用

showjoy iconFont 使用

iconfont 介绍

用字体文件取代图片文件,来展示图标、特殊字体等元素。

优点:

  1. 加载文件体积小

  2. 统一展示风格,使用方法

  3. 通过font-size,color就能自由变化大小,修改颜色,就像控制文字一样简单
    可以添加一些视觉效果如:阴影、旋转、透明度

  4. 兼容IE

  5. 后期维护成本很低

缺点:

  1. 制作门槛有点高,需要借助专业的工具生成字库文件

  2. 图标字体只能被渲染成单色或者CSS3的渐变色,由于此限制使得它不能广泛使用

方法一(产品项目中建议使用此方法,便于统一管理)

1.引入样式文件 iconfont-mobile.css

线上地址:http://cdn1.showjoy.com/assets/event/icon-mobile/icon-mobile.css

2.在html中挑选对应的图标,根据图标确定 className,如 加号的className 为 icon-add

3.示例:

<link rel="stylesheet" href="iconfont-mobile.css"><!-- 引入样式文件 -->  
<span class="icon-add"></span><!-- 加号图标 -->  
<span class="icon-cut"></span><!-- 减号图标 -->  

4.现有的图标及其className一览表

| 描述 |className | 字符 |对应图标| |:--------:|:--------:|:--------:|:-------:| |加号|icon-add|e900| enter image description here | |减号|icon-cut|e911|enter image description here| |圆形上箭头|icon-arrowup|e901|enter image description here| |圆形右箭头|icon-arrowright|e907|enter image description here| |圆形下箭头|icon-arrowdown|e903|enter image description here| |圆形左箭头|icon-arrowleft|e905|enter image description here| |上箭头|icon-arrowup-nobg|e908|enter image description here| |右箭头|icon-arrowright-nobg|e906|enter image description here| |下箭头|icon-arrowdown-nobg|e902|enter image description here| |左箭头|icon-arrowleft-nobg|e901|enter image description here| |圆形购物袋|icon-cartbag|e90a|enter image description here| |购物袋|icon-cartbag-nobg|e909|enter image description here| |评论气泡|icon-comment|e90d|enter image description here| |无评论气泡|icon-comment-no|e90c|enter image description here| |关闭|icon-close|e90b|enter image description here| |圆形对勾|icon-right|e923|enter image description here| |圆形叉|icon-error|e915|enter image description here| |客服|icon-contact|e90e|enter image description here| |圆形用户|icon-user|e92a|enter image description here| |用户|icon-user-nobg|e929|enter image description here| |倒计时|icon-countdown|e90f|enter image description here| |优惠券|icon-coupon|e910|enter image description here| |删除|icon-delete|e912|enter image description here| |编辑|icon-edit|e914|enter image description here| |订单|icon-order|e920|enter image description here| |礼物|icon-gift|e916|enter image description here| |美丽宝|icon-ebank|e913|enter image description here| |特卖|icon-groupon|e919|enter image description here| |试用|icon-try|e928|enter image description here| |圆形商品库|icon-goods|e918|enter image description here| |商品库|icon-goods-nobg|e917|enter image description here| |手机|icon-mobile|e91f|enter image description here| |邮车|icon-postalcar|e922|enter image description here| |飞机|icon-plane|e921|enter image description here| |电话|icon-tel|e926|enter image description here| |下拉三角|icon-triangle|e927|enter image description here| |星星|icon-star|e925|enter image description here| |爱心|icon-heart|e91a|enter image description here| |锁定|icon-locked|e91d|enter image description here| |三点菜单|icon-menu|e91e|enter image description here| |主页|icon-home|e91c|enter image description here| |搜索|icon-search|e924|enter image description here| |帮助|icon-help|e91b|enter image description here|

以上图标为目前 mobile 工程里所有的图标,暂不支持其他图标。若需要增加新的图标,需要找设计师绘制,前端整理出一份新的字体图标库。

方法二

  1. 把自己定义的 Web 字体嵌入到网页中

包括4种类型:enter image description here

在对应的样式文件 style.css 代码中加上自定义字体

font-face {  
    font-family: 'icomoon';
    src:    url('fonts/showjoy-mobile.eot');
    src:    url('fonts/showjoy-mobile.eot#iefix') format('embedded-opentype'),
        url('fonts/showjoy-mobile.ttf') format('truetype'),
        url('fonts/showjoy-mobile.woff') format('woff'),
        url('fonts/showjoy-mobile.svg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* 给class以 icon- 开头的元素使用自定义字体 */
[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
  1. HTML中直接使用,无需通过方法一中的className
    <!doctype html>
<html>  
<head>  
    <meta charset="utf-8">
    <title>Demo</title>
    <link rel="stylesheet" href="iconfont-mobile.css">
    <style type="text/css">
        .icon-test{
            font-size: 60px;
            color: red;
        }
    </style>
</head>

<body>  
    <div class="icon-test">&#xe900;</div><!-- 显示自定义图标 -->
</body>

</html>  

效果: enter image description here

注意这种方法中必须有以 icon- 为开头的className

米奇

继续阅读此作者的更多文章