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. python第四节【函数】

    函数 1. 函数 def greet_user(): """显示简单的问候语""" print("Hello") gre ...

  2. redis(一)动态字符串

    redis 动态字符串 概述 Sda(Simple Dynamic String) 简单动态字符串是 redis中用来表示字符串的结构,而不是传统 C 字符串. 主要的特点就是Sda要做到高效和 二进 ...

  3. 【C语言】创建一个函数，判断某一正整数是否为完数，并调用这个函数找出1000以内所有完数

    什么是完数? 如果一个数等于它的因子之和,则称该数为“完数”(或“完全数”). 例如,6的因子为1.2.3,而 6=1+2+3,因此6是“完数”.  问题分析 根据完数的定义,解决本题的关键是计算出所 ...

  4. SpringCloud或SpringBoot+Mybatis-Plus利用mybatis插件实现数据操作记录及更新对比

    引文 本文主要介绍如何使用mybatis插件实现拦截数据库操作并根据不同需求进行数据对比分析,主要适用于系统中需要对数据操作进行记录.在更新数据时准确记录更新字段 核心:mybatis插件(拦截器). ...

  5. C语言：去除一个字符串中所有的空格。-函数fun传入形参m，求t=1/2-1/3+1/4.....+1/m的值。-判断形参a指定的矩阵是不是“幻方“。

    //函数fun功能:判断形参a指定的矩阵是不是“幻方“,若是返回1.(”幻方”:每列,每行,对角线,反对角线相加都相等) #include <stdio.h> #define N 3 in ...

  6. Qt连接mysql数据库遇到QMYSQL driver not loaded

    本文件向各位博友分享一下我在Qt开发过程中,连接mysql数据库时遇到的问题,以及解决的方法,希望对遇到同样问题的博友有所帮助. 工程运行环境:vs2015+Qt5.8 在开发过程中,编写数据库连接函 ...

  7. k sum 问题系列

    转自:http://tech-wonderland.net/blog/summary-of-ksum-problems.html (中文旧版)前言: 做过leetcode的人都知道, 里面有2sum, ...

  8. 监控Tomcat状态！（重点）

    方法一:开发JAVA监控页面 [root@localhost ~]# mkdir /usr/local/tomcat8/webapps/memtest/[root@localhost ~]# cd / ...

  9. 1. Elasticsearch startup on local

    Download: https://www.elastic.co/downloads/elasticsearch 2. Setting: 1. [elasticsearch]\config\elast ...

  10. apache、mysql、php核心、phpmyadmin的安装及相互关联

    1.apache的安装 https://blog.csdn.net/ashendove/article/details/52206198 里面的serverName  就是你在服务中 设置的apach ...