zoukankan      html  css  js  c++  java
  • CSS高级技巧 图标字体ICONFONT的使用方法视频

    图标字体  iconfont

    这是一种字体,它跟svg 有很大 相似点  
    它是矢量的,放大缩小不失真的。很且很小。 我们把它成字看来。
    字体 在 从ie4就开始支持的。  兼容性很好
    唯一麻烦的地方,就是制作麻烦。
    越来越的网站开始运用这个图标字体。 一些地方,我们就不用精灵图片,直接用图标字体。

    图标字体的使用

    自己制作比较麻烦,我们一般是网上直接下载,因此,要使用iconfont字体一共分为三步:

    1. 先从网上下载字体。  
     
    经常使用的两个网站:

       icomoon.io            

       http://iconfont.cn/   阿里妈妈字体库 
     
      我们以icomoon.io 为主
      
      打开网站点 : icomoon App 按钮

     小强零零壹图标字体的使用教程  http://www.xiaoqiang001.com

    继续 

     小强零零壹图标字体的使用教程  http://www.xiaoqiang001.com
     

    小强零零壹图标字体的使用教程  http://www.xiaoqiang001.com

    小强零零壹图标字体的使用教程  http://www.xiaoqiang001.com
     
     
     2. 声明字体

    这么多是为了兼容浏览器,所以,大家只管复制就可以了,看好路径
    @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#uxiconfont') format('svg'); /* iOS 4.1- */
     
    小强零零壹图标字体的使用教程  http://www.xiaoqiang001.com
     
    3. 使用字体  
    每个图片都会对应着一个文字,所以这个文字要记住。
    例如:
     小强零零壹图标字体的使用教程  http://www.xiaoqiang001.com
    先复制文字  在加  font-family

    最后就可以看到效果了。

    具体完整操作,请参看视频地址:

         http://www.tudou.com/programs/view/LaCdxBCcrrw/  

  • 相关阅读:
    比SRCNN效果好的传统超分辨率算法汇总
    CSS3 2D转换
    CSS3 文本效果
    CSS3 Gradients(渐变)
    CSS3 背景
    CSS3 圆角
    CSS3 边框
    CSS3 简介
    CSS 属性选择器
    CSS 媒体类型
  • 原文地址:https://www.cnblogs.com/xiaoqiang001/p/3839814.html
Copyright © 2011-2022 走看看