1、为啥要用font-face制作小图标

1）适用性：一个图标字体要比一系列的图像要小，一旦字体图标加载完，图标则会立刻显示出来，不需要去下载一个图像。

2）可扩展性：可以使用font-size对图标进行大小设置，这使得能够随时输出不同大小的图标；但如果是图片，则需要为不同大小的图片输出不同的文件。

3）灵活性：可以为图标添加任何文字效果，并且可以在任何背景下展示。

4）兼容性：网页字体支持所有现代浏览器，包括IE低版本。

2、实现步骤

首先，将SVG转换成web字体。使用网站：Icomoon

点击‘Import Icons’按钮导入需要转换为web字体的图标。选中后点击 ‘Generate Font’按钮将web字体下载下来。

下载文件中有个demo.html，打开文件，可以看到不同的图标对应的通字符：

其次，调用字体。

声明@font-face:

@font-face{

            font-family: 'icomoon';

            src:url('fonts/icomoon.eot');  /* IE 专用*/

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

                url('fonts/icomoon.woff') format('woff'),                     /* chrome,firefox,IE9+,safari,opera */

                url('fonts/icomoon.ttf') format('truetype'),                  /* IOS4.2+ */

                url('fonts/icommon.svg') format('svg');                       /* IOS */

            font-weight: normal;

            font-style: normal;

}

使用字体：

[class ^="icon-"],[class*=' icon-']{

            font-family: 'icomoon';

        }

        .icon-1:before{

            content: "\e600";

}

测试代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>font-face 测试页面</title>

    <style>

        @font-face{

            font-family: 'icomoon';

            src:url('fonts/icomoon.eot');  /* IE 专用*/

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

                url('fonts/icomoon.woff') format('woff'),                     /* chrome,firefox,IE9+,safari,opera */

                url('fonts/icomoon.ttf') format('truetype'),                  /* IOS4.2+ */

                url('fonts/icommon.svg') format('svg');                       /* IOS */

            font-weight: normal;

            font-style: normal;

        }

        

        [class ^="icon-"],[class*=' icon-']{font-family: 'icomoon';}

        .icon-1:before{content: "\e600";}

        .icon-2:before{content: "\e601";}

        .icon-3:before{content: "\e602";}

        .wrap ul{list-style: none;}

        .wrap ul li{line-height: 28px;font-size: 28px;}

    </style>

</head>

<body>

    <section class="wrap">

        <ul>

            <li class="icon-1">第一个li</li>

            <li class="icon-2">第二个li</li>

            <li class="icon-3">第三个li</li>

        </ul>    

        

    </section> 

</body>

</html>

效果图：

@font-face制作小图标的实践的更多相关文章

  1. ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息

    一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...

  2. 【CSS学习笔记】初始化CSS后，写li，并利用背景图片，来完成li小图标的效果，且达到个浏览器兼容

    第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里.    在<li>中设置背景图片的尺寸,地址,不重复, ...

  3. 关于input输入框内设置小图标的问题

    其实很简单,只需要html和css就可以搞定啦 首先:<input class="layui-input" id="test1" placeholder= ...

  4. 转：Eclipse 各种小图标的含义

    原文地址:https://www.cnblogs.com/widget90/p/7592507.html Eclipse 各种小图标的含义,记录一下. Eclipse的Package Explorer ...

  5. css：自己实现一个带小图标的input输入框

    有小图标的input输入框<input type="text" placeholder="输入手机号" style="background:ur ...

  6. Eclipse自定义启动画面和状态栏图标以及各种小图标的含义

    一. 启动画面自定义 第一种情况:纯Eclipse 找到Eclipse安装路径下\eclipse\plugins\org.eclipse.platform_3.7.2.v201202080800,具体 ...

  7. 手机uc浏览器，获取到图片，但左上有小图标的问题

    手机uc浏览器有个坑 获取不到图片,左上是这样的

  8. 使用font awesome制作网站常用社交工具联系方式图标

    在公司项目或者个人建站时经常会有这么一个需求,就是在网站的底部以图标的形式加入自己的某些常用社交联系方式,比如QQ.微信.微博.Twitter等等,如果采用传统切图的方式去制作这些图标会有两个缺点: ...

  9. 【咸鱼教程】TextureMerger1.6.6 三：Bitmap Font的制作和使用

    BitmapFont主要用于特殊字体在游戏中的使用   目录 一 方法1:添加字符      适合一张一张的零碎图片来制作位图字体 二 方法2:系统字体      适合使用已安装的系统字体来制作位图字 ...

随机推荐

  1. 官方webupload上传多个文件或者图片的方法

    文件上传 页面代码: <!--引入CSS--> <link rel="stylesheet" type="text/css" href=&qu ...

  2. Java中集合类

    一.Collection Collection 接口用于表示任何对象或元素组.想要尽可能以常规方式处理一组元素时,就使用这一接口.Collection 在前面的大图也可以看出,它是List 和 Set ...

  3. 转义字符 & sizeof & strlen

    在定义了数组大小时: sizeof是运算符,表示编译时分配的空间大小,即数组定义的大小,char t[20] = "sfa".sizeof: 20; strlen: 3.在未定义数 ...

  4. 牛客网NOIP赛前集训营-提高组（第三场）A 管道维修

    https://www.nowcoder.com/acm/contest/174/A 这个的话  一个位置被清理的时间就是它到空白格子/边界的最短路对吧qww 然后求期望的话 假设它在第i步被清理掉的 ...

  5. CF-1110 (2019/02/08)

    CF-1110 A. Parity 快速幂的思想,考虑最后一位即可 #include <bits/stdc++.h> using namespace std; typedef long l ...

  6. Git学习——查看修改记录

    查看修改结果 修改之前commit的文件,输入下面的而命令,可以查看文件的改动,输入下面命令.还可以采用git diff命令来看看具体修改了什么. 如果确认无误,添加add和提交commit文件. g ...

  7. Immutable 特性

    https://io-meter.com/2016/09/03/Functional-Go-persist-datastructure-intro/ 持久化的数据结构(Persistent Data ...

  8. Ubuntu 16.04如何使用无线网卡上网

    我使用的无线网卡卡托型号是华为E8372h,网卡是普通电信卡(既可以打电话也可以上网). 按照“芯片朝上.缺口朝外.用最大卡”的方法将网卡装入卡托后,紧接着便将卡托插入笔记本对应的USB接口中. 在这 ...

  9. hdu6058[链表维护] 2017多校3

    用一个双向链表来查找比当前元素大的前k-1个元素和后k-1个元素 ,从小到大枚举x,算完x的贡献后将x从链表中删除,优化到O(nk). /*hdu6058[链表维护] 2017多效3*/ #inclu ...

  10. tarjan 缩点 求 scc

    算法学自 BYVoid https://www.byvoid.com/zhs/blog/scc-tarjan/ 这个写得很清楚了 当然 你可能不这么认为 而且 如果是让我 一开始就从这个博客 学 ta ...