本篇主要介绍一种非常好用的图标大法——图标字体（IconFont）。

　　什么是图标字体？顾名思义，它是一种字体，只不过这个字体显示的并不是具体的文字之类的，而是各种图标。

　　网站上经常会用到各种图标，之前网页上使用图标主要采用精灵图（背景位置+背景缩放）来实现，但是这样使用起来有许多不便之处，一方面缩放处理起来比较麻烦，一方面如果要改动一些图标就需要去找到设计人员重新设计，然后重新添加，这个过程非常不友好。

　　图标字体可以非常便捷的去解决以上问题，使用起来也非常简单。因为他是字体，所以可以当成字体来引用，只需要给出对应的字符而不需要通过测量背景图片位置那么麻烦。并且改变图标大小只需要改变字体大小就可以了。这里有两个网站推荐：（1）、阿里巴巴矢量图标库http://iconfont.cn/ （2）IcoMoon https://icomoon.io/

　　下面给出IcoMoon 具体使用方法

　　1、打开IcoMoon 网站，点击IconMoon App。

　　

　　2、打开后是具体图标的界面，可以自己添加自己的图标进行生成，也可以选用他给出的图标，在默认图标的下方 会有add Icons From Library 点击后可以看到更多的图标供选择（有免费的有付费的）。

　　

　　3、点击Generate Font后会生成 当前选择的图标的界面，右下角的Generate Font 也会变成 Download ，也可以进行相关的下载设置（例如：让其支持ie6/7之类的）。

　　4、下载完成后 会有以下文件，这些文件都最好保存下来，不要随意删掉。

　　　　

　　5、接下来给出图标字体的具体使用方法（也可以自行看使用图标字体的css文件——style.css的相关内容）

　　　　（1）、将字体文件夹复制到项目中并且声明字体（此处代码不需要记忆，因为基本上都一样，直接复制即可）　　　

 @font-face {

            font-family: 'icomoon';/*声明字体名称，可自行设置，应用的时候对应即可*/

            src: url('fonts/icomoon.eot?lep7lm');

            src: url('fonts/icomoon.eot?lep7lm#iefix') format('embedded-opentype'),

                 url('fonts/icomoon.ttf?lep7lm') format('truetype'),

                 url('fonts/icomoon.woff?lep7lm') format('woff'),

                 url('fonts/icomoon.svg?lep7lm#icomoon') format('svg');

            font-weight: normal;

            font-style: normal;

        }

　　　　（2）、使用字体　　　　

 .IconMoon {

            font-family: 'icomoon';

        }

　　　　（3）、具体显示对应图标

　　　　　　a、直接使用（很方便，但是一般不要使用，因为光看小方块分辨不出这些图标有什么区别）， 例如

 　　　　　　<li><span class="iconhome"></span></li>

            <li><span class="iconsmile"></span></li>

            <li><span class="icontongue"></span></li>

　　　　　　span标签中间的小方块不是真的方块，而是对应Demo页面中每个图标下面对应右侧的方块。

　　　　　　

　　　　　　b、使用css 伪元素选择器before 来进行添加

            <li><span class="icon-home">在这前面有一个home图标</span></li>

            <li><span class="icon-smile2">在这前面有一个smile2图标</span></li>

            <li><span class="icon-tongue2">在这前面有一个tongue2图标</span></li>

            <li><span class="icon-sad2">在这前面有一个sad2图标</span></li>

            <li><span class="icon-wink">在这前面有一个wink图标</span></li>

　　　　　　对应的css代码为　　　　　

 .icon-home:before {/*content的值是对应的图标代码*/

            content: "\e900";

        }

        .icon-smile2:before {

            content: "\e9e2";

        }

        .icon-tongue2:before {

            content: "\e9e4";

        }

        .icon-sad2:before {

            content: "\e9e6";

        }

        .icon-wink:before {

            content: "\e9e7";

        }

　　　　　　效果图为

　　　　　　　　

　　　　（4）、正如之前所说，这些图标本质上是字体，所以可以很方便的去改变颜色，大小，产生阴影效果等

　　　　　　　　

具体的代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        Ul {

            list-style: none;

        }

        @font-face {

            font-family: 'icomoon';

            /*声明字体名称，可自行设置，应用的时候标出即可*/

            src: url('fonts/icomoon.eot?lep7lm');

            src: url('fonts/icomoon.eot?lep7lm#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?lep7lm') format('truetype'), url('fonts/icomoon.woff?lep7lm') format('woff'), url('fonts/icomoon.svg?lep7lm#icomoon') format('svg');

            font-weight: normal;

            font-style: normal;

        }

        .IconMoon {

            font-family: 'icomoon';

        }

        .icon-home:before {

            /*content的值是对应的图标代码*/

            content: "\e900";

            color: aqua;

            font-size: 20px;

        }

        .icon-smile2:before {

            color: deeppink;

            font-size: 40px;

            content: "\e9e2";

        }

        .icon-tongue2:before {

            color: orange;

            font-size: 10px;

            content: "\e9e4";

        }

        .icon-sad2:before {

            content: "\e9e6";

            text-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);

            color: blue;

            font-size: 40px;

        }

        .icon-wink:before {

            content: "\e9e7";

            text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.4);

            color: blue;

            font-size: 40px;

        }

    </style>

</head>

<body>

    <div class="IconMoon">

        <ul>

            <li><span class="icon-home">在这前面有一个home图标</span></li>

            <li><span class="icon-smile2">在这前面有一个smile2图标</span></li>

            <li><span class="icon-tongue2">在这前面有一个tongue2图标</span></li>

            <li><span class="icon-sad2">在这前面有一个sad2图标</span></li>

            <li><span class="icon-wink">在这前面有一个wink图标</span></li>

        </ul>

    </div>

</body>

</html>

　　6、当我们想要给字体添加新的图标或者减去一些图标时，只需再次打开网站，进入到IconMoon App 页面，然后点击 Import Icons 将之前我们下载的字体文件目录下的selection.json 文件，就可以在我们之前选中的基础上再次进行操作了，用起来非常的方便。

CSS 小结笔记之图标字体（IconFont）的更多相关文章

  1. CSS高级技巧 图标字体ICONFONT的使用方法视频

    图标字体  iconfont 这是一种字体,它跟svg 有很大 相似点   它是矢量的,放大缩小不失真的.很且很小. 我们把它成字看来. 字体 在 从ie4就开始支持的.  兼容性很好 唯一麻烦的地方 ...

  2. 图标字体(IconFont)制作

    图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face) ...

  3. CSS 小结笔记之解决flex布局边框对不齐

    在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE htm ...

  4. CSS 小结笔记之浮动

    在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <h ...

  5. css与jquery、图标字体

    *)还能这样选择 header #search input[type="text"] *)按钮常用颜色:#008cBA(字母大小写没有区别) *)清除浮动后,text-align没 ...

  6. CSS学习笔记----CSS3自定义字体图标

    响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...

  7. 图标字体iconfont的使用

    什么是iconfont? iconfont就是字面上的意思,叫做"字体图标",将一套图标集以字体文件的形式封装,并通过 CSS 的 @font-face 作为 Web Font 调 ...

  8. css读书笔记4：字体和文本

    字体属性网页中的字体有3个来源:1.用户机器中安装的字体:2.保存在第三方网站上的字体.可以使用link标签把它们链接到页面中:3.保存在子集的web服务器上的字体.可以使用@font-face规则随 ...

  9. CSS 小结笔记之em

    1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的 ...

随机推荐

  1. Linux驱动：I2C驱动编写要点

    继续上一篇博文没讲完的内容“针对 RepStart 型i2c设备的驱动模型”,其中涉及的内容有:i2c_client 的注册.i2c_driver 的注册.驱动程序的编写. 一.i2c 设备的注册分析 ...

  2. 五、CLR加载程序集代码时,JIT编译器对性能的产生的影响

    1.CLR首次加载代码造成的性能损失 四.CLR执行程序集中代码介绍了CLR在首次执行一个类的时,会初始化一个内部结构,然后当目标方法被首次调用时,JITComplier函数(JIT编译器)会验证IL ...

  3. 基于sql service会话共享，实现SSO

    1:session的存储基于sql service数据库来存储 2:修改sql service中会话管理的系统存储过程 3:实现几个站点的会话共享 4:应用共享会话,实现单点登录

  4. Android Design Support Library——Navigation View

    前沿 Android 从5.0开始引入了Material design元素的设计,这种新的设计语言让整个安卓的用户体验焕然一新,google在Android Design Support Librar ...

  5. 全网最详细的Hadoop HA集群启动后，两个namenode都是standby的解决办法（图文详解）

    不多说,直接上干货! 解决办法 因为,如下,我的Hadoop HA集群. 1.首先在hdfs-site.xml中添加下面的参数,该参数的值默认为false: <property> < ...

  6. 如果非得了解下git系统... - 实践篇

    git的定义是一个内容寻址文件系统.内容.寻址.文件.系统,该来的总会来的… 本文旨在通过实践来介绍.git文件夹中的目录及文件功能,属git基础知识.但在此基础上可解决各git使用过程中可能遇到的问 ...

  7. git 删除远程分支文件夹

    把不需要版本控制的文件提交到远程分支上后,需要删除远程分支上的文件,用以下操作即可: git rm -r –cached dirname //删除远程文件夹,但保留本地文件夹 git commit - ...

  8. 开启linux远程访问权限

    摘要:今天在Linux服务器上安装了msyql数据库,在本地访问的时候可以访问,但是我想通过远程的方式访问的时候就不能访问了,查询资料后发现,Linux下MySQL默认安装完成后只有本地访问的权限,没 ...

  9. logback打印mybatis sql日志

    近期在项目中调试sql,发现现有的配置 使用logback 无法打印出sql语句,原配置如下(修改为debug也不好使): <!--jdbc --><logger name=&quo ...

  10. SingleThreadExecutor（单线程执行器）

    前要:一般的执行器会为每个任务单独创建线程,起码是分配单独的线程,即每个任务有其自己的线程.这样可以让任务并发执行.   问题:既然这样,为什么只用一个线程处理多个任务呢?     如果是这样,那一个 ...