本篇主要介绍一种非常好用的图标大法——图标字体（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. PHP：使用Zend对源码加密、Zend Guard安装以及Zend Guard Run-time support missing的解决方法

    Zend Guard是目前市面上最成熟的PHP源码加密产品了.刚好需要对自己的产品进行加密,折腾了一晚上,终于搞定,将碰到的问题及解决方法记录下来,方便日后需要,也可以帮助其他人.我使用的是Wamps ...

  2. ASP.NET MVC网站使用新浪微博账号登录

    首先到http://open.weibo.com/development 注册一个开发者账号. 然后可以点微连接--网站接入 会分配App Key 和App Secret 然后点高级信息 在这里设置回 ...

  3. hexo 静态页面生成后页面打不开的问题

    我这里的原因是4000端口被占用了 *** hexo入门指南教程: 官方文档 用Hexo 3 搭建github blog 做一款hexo主题(进阶) 坑 1 要安装node和git 2 别忘了安装he ...

  4. tomcat8 进入不了Manager App 界面 403 Access Denied

    准备 1.注释掉context.xml中的value属性 使用下面的命令: vim /usr/local/tomcats/tomcat-daily/webapps/manager/META-INF/c ...

  5. Linux 上SSH 服务的配置和管理

    0.前期准备:清空防火墙,关闭SELinux. [root@localhost ~]# iptables -F #清空防火墙 [root@localhost ~]# /etc/init.d/iptab ...

  6. 在Java的反射中，Class.forName和ClassLoader的区别

    前言 最近在面试过程中有被问到,在Java反射中Class.forName()加载类和使用ClassLoader加载类的区别.当时没有想出来后来自己研究了一下就写下来记录一下. 解释 在java中Cl ...

  7. zoj 2060 Fibonacci Again（fibonacci数列规律、整除3的数学特性）

    题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2060 题目描述: There are another kind ...

  8. C编程基础

    1. Hello World! 依照惯例首先Hello World镇楼: 1 #include<stdio.h> 2 3 int main(void) { 4 printf("H ...

  9. 传统项目转前端工程化——路由跳转时出现浏览器锁死和白屏【该死的同步ajax】

    [一开始我想到是该死的同步ajax,但我没验证,把他忽略了] 在探索前端工程化vue-cli做spa时,从搜索结果页跳转商品详情页时,因为详情页有很多ajax请求,并且都用的同步请求,就会导致请求时浏 ...

  10. JVM 内存初学 (堆(heap)、栈(stack)和方法区(method) )（转载）

    想想面试的时候很多会问jvm这方面的问题虽然还是菜鸟不太能用到现在但是还是了解一下, 找资料的时候看见个大佬写的很好转载到这方便以后自己复习和给大佬做宣传 以下为大佬的博客原文: 这两天看了一下深入浅 ...