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. 关于React Native init 项目时候速度太慢的解决方法

    因为init项目的时候需要下载资源,但又因为react native的网站被墙所以下载很慢,解决方法就是换成淘宝的NPM镜像 我是直接使用了命令去替换了NPM $ npm install -g cnp ...

  2. Sqoop的安装及常用命令

    本次安装主要是为了离线分析数据清洗完成后的操作:网站日志流量分析系统之数据清洗处理(离线分析) 一.概述 1. sqoop是Apache 提供的工具,用于hdfs和关系型数据库之间数据的导入和导入 2 ...

  3. JDK8;HashMap:再散列解决hash冲突 ，源码分析和分析思路

    JDK8中的HashMap相对JDK7中的HashMap做了些优化. 接下来先通过官方的英文注释探究新HashMap的散列怎么实现 先不给源码,因为直接看源码肯定会晕,那么我们先从简单的概念先讲起   ...

  4. winform Anchor和Dock属性

    在设计窗体时,这两个属性特别有用,如果用户认为改变窗口的大小并不容易,应确保窗口看起来不显得很乱,并编写许多代码行来达到这个目的,许多程序解决这个问题是地,都是禁止给窗口重新设置大小,这显然是解决问题 ...

  5. 【笔记2-环境配置及初始化】从0开始 独立完成企业级Java电商网站开发(服务端)

    准备工作 Linux系统安装 云服务器部署 概要 申请和配置 域名的购买.解析.配置.绑定流程 用户创建实操 环境安装及部署 JDK.Tomcat.Maven下载安装及配置 vsftpd下载安装及配置 ...

  6. VBA 学习笔记 - 输入框

    学习资料 https://www.yiibai.com/vba/vba_input_box.html 输入框 InputBox 函数说明 提示用户输入值.当输入值后,如果用户单击确定 按钮或按下键盘上 ...

  7. Web--Response

    using Newtonsoft.Json.Linq; using System; using System.Collections.Generic; using System.Linq; using ...

  8. Codeforces Round #618 (Div. 2)C. Anu Has a Function

    Anu has created her own function ff : f(x,y)=(x|y)−y where || denotes the bitwise OR operation. For ...

  9. Update(Stage4)：Spark Streaming原理_运行过程_高级特性

    Spark Streaming 导读 介绍 入门 原理 操作 Table of Contents 1. Spark Streaming 介绍 2. Spark Streaming 入门 2. 原理 3 ...

  10. 【Fine学习笔记】Jmeter笔记

    熟悉几个专有名词: 1.测试计划是顺序执行的,一个性能测试必须有的三部分:测试计划.线程组.sampler(采样器)--核心 2.控制器(用来定义请求执行的):loop if else 3.timer ...