转载  svg创建字体图标--如何使用svg字体图标

分类: 2015-10-15T10:39:21    545人阅读   

使用svg图标更能满足网页的自适应需求

工具/原料

  • 浏览器
  • 网络环境

方法/步骤

  1. 网上搜索矢量图标库,比如教程中用到的是“阿里巴巴矢量图标库”。进入网站选择风格一致的图标,点选进行下载~

    如何使用svg字体图标
  2. 使用font-face声明字体。font-family是自定的字体名称,url是字体文件的存放路径,format是字体文件格式。

    @font-face {

      font-family: \'iconfont\'; /*自定的字体名称*/

      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- */

    }

  3. 定义一个css样式,使用iconfont字体。

    .iconfont{    

      font-family:"iconfont" !important;    

      font-size:16px;font-style:normal;    

      -webkit-font-smoothing: antialiased;    

      -webkit-text-stroke-width: 0.2px;    

      -moz-osx-font-smoothing: grayscale;

    }

  4. 挑选相应图标并获取字体编码,将样式应用于页面即可。

    <i class="iconfont">&#x33;</i>

    如何使用svg字体图标
    END

分享到: