• 字体图标使用笔记


    字体图标使用笔记:

     

    优缺点:

    首先,我们先恶补下什么是字体图标:用字体文件取代图片文件,来展示图标、特殊字体等元素的方法。

    优点:

    • 加载文件体积小
    • 统一展示风格,使用方法
    • 通过font-size,color就能自由变化大小,修改颜色,就像控制文字一样简单
    • 可以添加一些视觉效果如:阴影、旋转、透明度
    • 兼容IE6
    • 后期维护成本很低

    缺点:

    • 制作门槛有点高,需要借助专业的工具生成字库文件
    • 需要服务器做些相应的配置来解决识别问题和跨域问题

     

     

    两家相对比较权威的字体图标:阿里巴巴Iconfont 和 Font Awesome

    字体图标的使用方法:

    第一步:下载

        在官网下载即可。

     

     

    第二步:引入

    为了方便资源调用,尽量将.css 和字库文件放在一个文件夹下,不要随意拆开部署,防止无法正常加载字体文件。

    Iconfont

    1. <link href="lib/iconfont/iconfont.css" rel="stylesheet" type="text/css"/>
     

    Font Awesome

    1. <link href="lib/font-awesome/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    2. <!--[if IE 7]>
    3. <link href="lib/font-awesome/font-awesome-ie7.min.css" rel="stylesheet" type="text/css"/>
    4. <![endif]-->
     

    第三步:调用

    有两种使用方法

     

    方法1、挑选相应图标并获取字体编码(如果字库发生过更新,编码会发生相应的变化,需要重新获取对应编码),应用于页面。

    1. <i class="iconfont">&#xf0020;</i>
     

    方法2、通过对应的css类名调用

    1. <i class="iconfont iconfont-yunshangchuan"></i>
     

     

    字体图标的网站:

    【01】官网 font awesome 

    http://www.bootcss.com/p/font-awesome/

     

     

     

     

    【02】阿里巴巴矢量图标

    http://www.iconfont.cn/


     

    1.1 平台简介

    Iconfont.cn 是由阿里巴巴UX部门推出的矢量图标管理网站,也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新 中,Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。同时 iconfont.cn平台作为矢量图标倡导者,积极在线分享矢量图标制作经验、前端应用说明,及应用中常见的一些问题。

     

    1.2 网页矢量图标在线生成工具

    Iconfont.cn为解决设计师制作字体图标困难的问题,为用户提供了在线矢量格式转换的功能。设计师只要将设计好的图标上传至平台,平台将会将图标存储在平台上,并转换成多种格式文件。

    http://iconfont.cn/help/iconuse.html

    iconfont 使用方法。

     

     

     

    代码示例:

     

    以font-awesome 举例。

    使用方法:
     
    1.引入这个.css
    1. <link href="css/font-awesome.css" rel="stylesheet" type="text/css"/>
     
     
     
    2.把font文件夹的内容放入项目中,与CSS文件夹,js文件夹同级。
     
    3.使用网页首页的字体图标的类目即可。
    1. <!doctype html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8"/>
    5. <title>测试</title>
    6. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    7. <link href="css/font-awesome.css" rel="stylesheet" type="text/css"/>
    8.  
    9.  
    10. <style>
    11.  
    12. </style>
    13. <script>
    14.  
    15. </script>
    16. </head>
    17. <body>
    18. <i class=" icon-external-link"></i>
    19. </body>
    20. </html>
     
    效果:

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    **



  • 相关阅读:
    G
    F
    E
    D
    机器学习第二次作业
    机器学习第一次作业
    机器学习作业一
    软工实践个人总结
    第11组 Beta版本演示
    第11组 Beta冲刺(5/5)
  • 原文地址:https://www.cnblogs.com/moyuling/p/5150322.html
Copyright © 2020-2023  润新知