1. 概念



这个小红点是图标，图标在CSS中实际上是字体。

2. 为什么出现本质是字体的图标?

2.1 图片增加了总文件的大小。

2.2 图片增加了额外的http请求，大大降低网页的性能。

2.3 图片不能很多地进行缩放，因为图片放大和缩小会失真。

3. 字体图标的优点，结合图片和文字的特性

3.1 可以做出跟图片一样可以做的事情,改变透明度、旋转度等等

3.2 本质是文字，可以很随意的改变颜色、产生阴影、透明效果等等

3.3 体积更小，可携带的信息没有削减

3.4 几乎支持所有浏览器

3.5 对移动端设备友好

4. 字体图标使用流程

网站看bookmarks，美工 --> 图标

5. 字体引入到HTML

以https://icomoon.io/#home为例

点击右上角的IcoMoon App





将下载来的压缩包中的fonts文件夹放进我们的项目中

在html中声明字体

@font-face {

  font-family: 'icomoon';

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

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

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

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

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

  font-weight: normal;

  font-style: normal;

}

给盒子使用字体

span {

		font-family: "icomoon";

	}

盒子里面添加结构

span::before {

		 content: "\e900";

	}

或者

这个框框是从下载来的zip包中的demo.html里面找的，复制就可以

<span></span>

例子1.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        @font-face {

            /*声明字体  引用字体*/

            font-family: "icomoon";

            /*我们自己起名字可以*/

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

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

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

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

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

            font-style: normal;

            /*倾斜字体正常*/

        }

        .icon-location {

            font-family: "icomoon";

        }

        .icon-location::before {

            content: "\e947";

            font-size: 100px;

            color: red;

            font-style: normal;

        }

        .car {

            font-family: "icomoon";

        }

    </style>

</head>

<body>

    <!--    方法1，在::before写cotent-->

    <i class="icon-location"></i>

    <!--    方法2. 复制框框-->

    <i class="car"></i>

</body>

</html>

标签i，span，em，button也可以做（因为本质是文字）

6. 追加新图标到原来字体库里面

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做

把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。



假如美工做了个svg，在icomoon里直接Import，转成字体图标。

7. 还有其他使用图标的方法，没进行探讨

CSS - icon图标(icon font)的更多相关文章

  1. Expo大作战(十一)--expo中的预加载和缓存资产(Preloading & Caching Assets),expo中的图标 (Icon)

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  2. CSS Sprites+CSS3 Icon Font

    CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...

  3. Font Awesome-用CSS实现各种小图标icon

    Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果.官网:http://fontawesome.dashga ...

  4. amazeui学习笔记--css（常用组件6）--图标Icon

    amazeui学习笔记--css(常用组件6)--图标Icon 一.总结 1.关注用法即可:在 HTML 上添加添加 am-icon-{图标名称} class. <span class=&quo ...

  5. 字体图标Icon Font

    字体图标Icon Font 前段时间研究怎样做字体图标,在网上查找诸多资料,诸多尝试,找到一套可以自己制作自己独立控制的制作流程,公司按照这套流程形成一套自己公司图标,本人目前所在公司已经在使用没有发 ...

  6. 认识CSS中标题引入icon图标

    前端之HTML,CSS(十一) icon图标 icon图标的使用 获取网站的中标题icon图标,以京东为例:在域名后添加/favicon.ico Enter打开 鼠标右键,图标另存为下载icon图标, ...

  7. JS组件系列——不容错过的两款Bootstrap Icon图标选择组件

    前言:最近好多朋友在群里面聊到bootstrap icon图标的问题,比如最常见的菜单管理,每个菜单肯定需要一个对应的菜单图标,要是有一个可视化的图标选择组件就好了,最好是直接选择图标,就能得到对应的 ...

  8. 字体在网页中画ICON图标

    用字体在网页中画ICON图标有三种小技巧: 1.用CSS Sprite在网页中画小图标 实现方法: 首先将小图片整合到一张大的图片上 然后根据具体图标在大图上的位置,给背景定位.background- ...

  9. 在网页中制作icon图标

    用字体在网页中画icon图标 第一步:获取字体资源IconMoon网站https://icomoon.io iconMoon中有很多免费小图标可用,还能设置下载图标的使用属性(通过网站中设立的按钮pr ...

随机推荐

  1. C语言传递二维数组

    方法一, 形参给出第二维的长度. 例如: #include <stdio.h> ] ) { int i; ; i < n; i++) printf("/nstr[%d] = ...

  2. PHP 站内消息的表结构设计

    1)添加全站通知:信息存入到 tb_message 2)用户点开信息或者设置信息为已阅读:插入记录到 tb_message_readlog 如何设计存储的表?求最佳方案 CREATE TABLE `m ...

  3. Python解决RSA加密

    最近爬个网站需要用发现密码是通过RSA加密的,因此找网上python加密例子,发现都没有一个比较完整的demo so,自己写一个吧~ 首先,安装相应的库: 1. pyCrypto : pip inst ...

  4. Spring 事务管理的使用

    Spring提供了2种事务管理 编程式的 声明式的(重点):包括xml方式.注解方式(推荐) 基于转账的demo dao层 新建包com.chy.dao,包下新建接口AccountDao.实现类Acc ...

  5. Ubuntu Rabbitmq 安装与配置

    原文链接:http://blog.csdn.net/rickey17/article/details/72756766 添加源 新增公钥(不加会有警告) 更新源 安装rabbitmq-server e ...

  6. linu后台执行py文件和关闭的后台py文件

    后台执行py nohup python xxx.py 关闭后台执行py 查看进程pid ps -aux|grep main.py 根据pid关闭关闭进程 kill -9 (pid)

  7. 关于无线的Idle Timeout和Session Timeout

    1.Session Timeout Session Timer的默认值为1800s,也就是30min.Session Timeout:当该计时器超时时,使得客户端强制发生重认证,这个时间是从客户端认证 ...

  8. leetcode 0209

    目录 ✅ 500. 键盘行 描述 解答 ✅ 905. 按奇偶排序数组 描述 解答 py sorted 参数详解 ✅ 559. N叉树的最大深度 描述 解答 java dfs-like method(r ...

  9. Python学习第二十八课——Django(urls)

    Django框架中的urls配置: 首先通过pycharm创建一个Django项目: 例如要写blog的功能:则在digango_lesson中的urls代码如下: """ ...

  10. python浅析格式化输出和深浅copy

    一,格式化输出 今天主要想记录一下关于格式化输出的例子,然后结合了自己的理解,分析如下: 格式是 :百分号+占位符 主要有三种使用形式:%s  (其中s表示string)表示字符串 %d  (其中d表 ...