zoukankan      html  css  js  c++  java

  • 页面设计用字体代替图标

    IcoMoon图标字体

    做B/S系统设计时需要大量的图标，一般的做法是用PS做图标文件，文本说的是字体，用SVG绘制图标.

    其好处大家都很清楚，可以随意设置大小，颜色等，目前已经被很多大网站使用，如Github等，我就不多说了。

    将ICON生成字体

    推荐在线工具 IcoMoon，一款非常好的在线ICON2FONT的工具，默认提供几个常用的ICON库，也可以额外选择，或者自己上传，选择要生成的ICON点Font就可以生成并下载，选择的方法可以是点选或拖动选择，不支持全选。

    下载后的包里有字体文件，CSS，HTML一整套，字体文件和CSS是你要用到的，而HTML是教你如何使用，和所有图标的字体编号和样式名字方便你选择使用。

    使用方法

    1. 用法相当简单，加入下载包里的样式文件，如：icomoon.css

    2. 在html元素里加入额外标签 data-icon 值是下载包里html页面显示的图标下面的值，如：，这样就会生成一个图标伪元素来显示图标

      如：<div class="fs1" aria-hidden="true" data-icon="&#xe002;"></div>

    3. 第二方法是使用样式，同样会产生一个图标的伪元素来显示图标

      如：<span aria-hidden="true" class="icon-pushpin"></span>

    4. 自定义使用

      加载字体

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

      声明样式

      .iconfont{
    font-family: 'icomoon';
    content: 'e000'; /*相当于& #xe000; */
}

      由于字体文件的后缀很特殊，一些WEB容器默认不支持，就是无法正确下载到eot，woff等文件，我的解决办法是统一在后面加上.css这样就可以正确下载并被浏览器使用，浏览器会通过 format('woff') 来识别功能。
  • 相关阅读:
    11.菜单（一）
    线性表之顺序存储详解
    SVN 撤回已提交的代码
    线性表1
    顶层父类
    异常类之派生类
    new和delete重载
    异常类之基类
    Qt中多线程问题
    智能指针实例
  • 原文地址：https://www.cnblogs.com/xguo/p/3144017.html
Copyright © 2011-2022 走看看