zoukankan      html  css  js  c++  java
  • 阿里巴巴图标应用教程-iconfont

    阿里巴巴图标应用教程
    3.1 PC端应用教程
    iconfont对于前端应用来说有很多便捷:
    1、自由变化大小
    2、自由修改颜色
    3、可以添加一些视觉效果如:阴影、旋转、透明度。
    4、兼容IE6
    应用步骤:
    1
    font-face声明字体
    @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的样式
    .iconfont{font-family:"iconfont";
    font-size:16px;font-style:normal;}
    3
    挑选相应图标并获取字体编码,应用于页面
    &#33

    用到的知识点:
    before
    font-family:中文时必须用引号,英文的可以不用

  • 相关阅读:
    移动web基础
    CSS3
    HTML5新属性
    CSS3初体验之伪元素选择器
    HTML5+CSS3day_01
    CSS补充
    CSS_day02
    CSS_day01
    HTML_day02
    HTML_day01
  • 原文地址:https://www.cnblogs.com/sakura-sakura/p/6678519.html
Copyright © 2011-2022 走看看