ShiningDan的博客

网页组件制作之字体图标

发表于 | 分类于 | | 阅读次数

在该笔记中将学到一些常用的网页字体图标的制作方法与展示效果

小图标(icon)的制作

使用 CSS Sprite 在网页中画 Icon 小图标

CSS Sprite：把网页中零星的背景图片整合到一张图片文件中，再利用 CSS 的背景图片定位到要显示的位置，因此也叫”图片拼合“技术，这样做的好处是可以减少文件的体积和服务器的请求次数，提高效率。

非常重要的一点是，背景图片中小图标的排列一定要有规律，这样在添加和修改背景图片的时候，方便计算得到 background-position 的坐标值

要使用的知识点：

  1. background-image(整合好的背景图片)
  2. background-position(用来定位每个小图标的位置)

同样，可以在鼠标放在每个 li 上的时候，添加 onmouseover 和 onmouseout 动作，来修改背景的颜色和背景的图片。

<!DOCTYPE html>
<html>
    <head>
        <title>icon 案例演示</title>
        <meta charset="utf-8">
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            ul{
                list-style:none;
            }
            .sprite li{
                width:110px;
                height:30px;
                background-color: #F06;
                margin-top:1px; 
                list-style:none;
            }
            .sprite li a{
                text-decoration:none;
                line-height:30px;
                font-size:14px;
                color:white;
                font-weight:bold;
            }
            .i-icon{
                height:17px;
                width:17px;
                display:block;
                background-image:url("http://ofjjubwp5.bkt.clouddn.com/image/png/icon-sprite.png");
                float:left;
                margin:6px 6px;
            }
        </style>
    </head>
    <body>
        <ul class="sprite">
            <li><i class="i-icon" style="background-position: -16px -127px"></i><a href="">菜单选项1</a></li>
            <li><i class="i-icon" style="background-position: -33px -127px"></i><a href="">菜单选项2</a></li>
            <li><i class="i-icon" style="background-position: -50px -128px"></i><a href="">菜单选项3</a></li>
            <li><i class="i-icon" style="background-position: -67px -128px"></i><a href="">菜单选项4</a></li>
            <li><i class="i-icon" style="background-position: -84px -128px"></i><a href="">菜单选项5</a></li>
            <li><i class="i-icon" style="background-position: -101px -128px"></i><a href="">菜单选项6</a></li>
            <li><i class="i-icon" style="background-position: -118px -128px"></i><a href="">菜单选项7</a></li>
            <li><i class="i-icon" style="background-position: -135px -128px"></i><a href="">菜单选项8</a></li>
            <li><i class="i-icon" style="background-position: -153px -128px"></i><a href="">菜单选项9</a></li>
            <li><i class="i-icon" style="background-position: -0px -128px"></i><a href="">菜单选项10</a></li>
        </ul>
    </body>
</html>

显示效果如下：

font + HTML 在网页中画 Icon 小图标

使用字体图标的好处：

  1. 可以轻松改变图标的颜色或其他 CSS 效果(使用 font 属性进行修改)
  2. 可以像改变字体大小一样来改变图标的大小
  3. 图标是矢量的，与像素无关，缩放图标不会影响清晰度(方便与在不同设备的浏览器进行适配)
  4. 字体图标支持所有现代浏览器
  5. 通过添加定制字体到本地的系统中，可以在各种不同的设计和编辑应用程序中使用它们

使用 IcoMoon

icoMoon 可以免费提供图标，也可以构建我们需要的图标。在 IcoMoon 上可以导入本地的矢量图(SVG字体)，并且不会被上传到服务器，也可以生成字体和 SVG。

在 IcoMoon上，可以在线编辑小图标，然后下载到本地上。当要使用字体图标的时候，可以选中图标，单击 Generate Font 来生成字体图标。

将图标字体使用在网页中

使用 IcoMoon 会下载得到四种不同格式的常用的字体文件，分别是：.eot、.woff、.svg、.ttf。因为不同浏览器对这四种格式的字体文件支持成都不同，所以通常把所有的字体文件都下载使用。

可以使用 @font-face 属性将外部的字体引入使用，@font-face 属性的使用如下：

@font-face{
    font-family:<family-name>;
    src:[<url>[format(<string>#)]?|<font-face-name>]#;
    font-weight:<weight>;
    font-style:<style>;
}

使用 @font-face 中的 font-family 定义该字体图标的名称。然后在 CSS 格式中调用该 font-family 即可。在需要使用小图标的地方，将小图标对应的 16 进制 ID 号填入即可 ( ID 号可以在 IcoMoon 生成的压缩文件中的 demo.html 查看，注意该 ID 是十六进制的，所以在引入该 ID 的时候，要在前面加上 &#x )。

对小图标的显示效果进行修改，可以直接使用 font-style、font-size、font-weight 等修改字体的方法来修改小图标的显示样式。

<html>
    <head>
        <title>Font Icon 案例演示</title>
        <meta charset="utf-8">
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            body{
                background-color:#ccc;
            }
            .layout{
                width:510px;
                height:202px;
                margin:100px auto;
                list-style:none;
            }
            .layout li{
                width:100px;
                height:100px;
                background-color:#ddd;
                float:left;
                margin-right:2px;
                margin-top:2px;
                line-height:100px;
                text-align:center;

            }
            .layout li:hover{
                background-color:#eee;
            }
            .layout li a{
                text-decoration:none;
            }
            @font-face{
                font-family:"font-icon";
                src:url("http://ofjld69e3.bkt.clouddn.com/eot/icomoon.eot") format("embedded-opentype")
                    ,url("http://ofjld69e3.bkt.clouddn.com/svg/icomoon.svg") format("svg")
                    ,url("http://ofjld69e3.bkt.clouddn.com/ttf/icomoon.ttf") format("truetype")
                    ,url("http://ofjld69e3.bkt.clouddn.com/woff/icomoon.woff") format("woff");
                font-weight:normal;
                font-style:normal;
            }
            .font-icon{
                font-family:"font-icon";
                font-style:normal;
                font-weight:normal;
                font-size:60px;
                /* Better Font Rendering =========== */
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        </style>
    </head>
    <body>
        <ul class="layout">
            <li><a href=""><i style="color: #efe0ce" class="font-icon">&#xe914</i></a></li>
            <li><a href=""><i style="color: #ef7073" class="font-icon">&#xe915</i></a></li>
            <li><a href=""><i style="color: #78ade3" class="font-icon">&#xe916</i></a></li>
            <li><a href=""><i style="color: #eae77f" class="font-icon">&#xe917</i></a></li>
            <li><a href=""><i style="color: #3c3c3c" class="font-icon">&#xe918</i></a></li>
            <li><a href=""><i style="font-size: 20px" class="font-icon">&#xe919</i></a></li>
            <li><a href=""><i style="font-size: 40px" class="font-icon">&#xe91a</i></a></li>
            <li><a href=""><i style="font-size: 60px" class="font-icon">&#xe91b</i></a></li>
            <li><a href=""><i style="font-size: 80px" class="font-icon">&#xe91c</i></a></li>
            <li><a href=""><i style="font-size: 100px" class="font-icon">&#xe91d</i></a></li>
        </ul>
    </body>
</html>

显示效果如下：

font + CSS 在网页中画 Icon 小图标

实现方法：将小图标字体写入 CSS class，然后在需要的地方调用该 class 即可。

要使用的知识点：

  1. :before 伪元素：创建一个虚假的元素，并且插入目标元素内容之前
  2. content 属性：与 ：before 和 :after 配合，插入的内容需要使用 content 来指定

在 IcoMoon 中导出字体图标的时候，选择 Preferences 中的 CSS Selector，选择 Use a Class 选项，可以创建一个 CSS Class。在每个需要使用字体图标的地方首先添加该 class，设置基本的样式，然后添加每个图标对应的 class，就可以将图标导入。

每个图标对应的 class 就是只有 content 属性的 class，在使用该 class 以后，就使用 content 属性添加对应的字体图标。

这种方法需要对每一个字体图标都创建一个 class，所以使用的情况不是很多，更多的使用情况还是 font + HTML 形式。

<html>
    <head>
        <title>Font CSS 案例演示</title>
        <meta charset="utf-8">
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            body{
                background-color:#ccc;
            }
            .layout{
                width:510px;
                height:202px;
                margin:100px auto;
                list-style:none;
            }
            .layout li{
                width:100px;
                height:100px;
                background-color:#ddd;
                float:left;
                margin-right:2px;
                margin-top:2px;
                line-height:100px;
                text-align:center;

            }
            .layout li:hover{
                background-color:#eee;
            }
            .layout li a{
                text-decoration:none;
            }
            /**
            /* 下面的CSS 格式都是从 IcoMoon 中 style.css 里拷贝的
            **/
            @font-face {
                font-family: 'fontcss';
                src:url("http://ofjld69e3.bkt.clouddn.com/eot/icomoon.eot") format("embedded-opentype")
                    ,url("http://ofjld69e3.bkt.clouddn.com/svg/icomoon.svg") format("svg")
                    ,url("http://ofjld69e3.bkt.clouddn.com/ttf/icomoon.ttf") format("truetype")
                    ,url("http://ofjld69e3.bkt.clouddn.com/woff/icomoon.woff") format("woff");

                font-weight: normal;
                font-style: normal;
            }
            .icon {
                /* use !important to prevent issues with browser extensions that change fonts */
                font-family: 'fontcss' !important;
                speak: none;
                font-style: normal;
                font-weight: normal;
                font-variant: normal;
                text-transform: none;
                line-height: 1;

                /* Better Font Rendering =========== */
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            .icon-video-camera:before {
            content: "\e914";
            }
            .icon-dice:before {
            content: "\e915";
            }
            .icon-pacman:before {
            content: "\e916";
            }
            .icon-spades:before {
            content: "\e917";
            }
            .icon-clubs:before {
            content: "\e918";
            }
            .icon-diamonds:before {
            content: "\e919";
            }
            .icon-bullhorn:before {
            content: "\e91a";
            }
            .icon-connection:before {
            content: "\e91b";
            }
            .icon-podcast:before {
            content: "\e91c";
            }
            .icon-feed:before {
            content: "\e91d";
            }

        </style>
    </head>
    <body>
        <ul class="layout">
            <li><a href=""><i class="icon icon-video-camera"></i></a></li>
            <li><a href=""><i class="icon icon-dice"></i></a></li>
            <li><a href=""><i class="icon icon-pacman"></i></a></li>
            <li><a href=""><i class="icon icon-spades"></i></a></li>
            <li><a href=""><i class="icon icon-clubs"></i></a></li>
            <li><a href=""><i class="icon icon-diamonds"></i></a></li>
            <li><a href=""><i class="icon icon-bullhorn"></i></a></li>
            <li><a href=""><i class="icon icon-connection"></i></a></li>
            <li><a href=""><i class="icon icon-podcast"></i></a></li>
            <li><a href=""><i class="icon icon-feed"></i></a></li>
        </ul>
    </body>
</html>

显示效果如下，和 font + HTML 没有什么不同：