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. Spring IoC（三）bean属性、方法注释

    1.环境配置 使用注解开发jdk1.5.Spring2.5支持,在xml中添加context相关的是四个配置; <beans default-lazy-init="true" ...

  2. 安装多个xcode对homebrew影响

    安装多个xcode,可能会导致无法识别默认使用哪个xcode的情况,这时候执行下列语句,设置默认xcode sudo xcode-select --switch /Applications/Xcode ...

  3. Sqoop的安装及常用命令

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

  4. //C语言：将一个由字符0和1组成的表示二进制数的字符串，转换成相应的十进制数返回。

    //函数fun:将一个由字符0和1组成的表示二进制数的字符串,转换成相应的十进制数返回. #include <stdio.h> #pragma warning (disable:4996) ...

  5. Java的单例模式(singleton)

    为什么需要单例?只因为国家的独生子女政策(当然现在可以生2个) 单例是一个很孤独的物种,因为它的类里面做多只有也仅只有它一个. 常见的是懒汉及饿汉模式, 1.懒汉,为什么这么叫,看看英文,原为lazy ...

  6. 使用UUID防止文件重名

    在原文件名的基础上加 UUID.randomUUID().toString()

  7. 学好Linux必备知识

    鸟哥的私房菜中提到学好Linux必备的几种技能: 1.  计算器概论不硬件相关知识: 因为既然想要走Linux这门路,信息相关癿基础技能也丌能没有啊! 所以先理觋一下基础癿硬件知识,丌用一定要全懂啦! ...

  8. ubuntu 虚拟机添加多个站点

    我们安装好lamp环境,然后开始操作,比如一个站点叫test.ubuntu1.com,一个叫test.ubuntu2.com 1.修改hosts文件,路径/etc/hosts sudo vim /et ...

  9. 【转】弹出USB大容量存储设备时出问题的解决方法

    原文链接 如下图所示,这个问题,相信很多人都有遇到过,而且经常难以解决,试了很多方法都无效.到最后,只能抱着侥幸的心理直接拔出,如果运气好,可能没有事,如果运气不好,你的U盘或者移动硬盘就要从此报废了 ...

  10. Linux终端的一些快捷键命令

    一.初识linux的终端种类:本地.远程 查看本终端命令: #tty 命令,看到当前所处的终端 #(w)who 命令,看到系统中所有登录的用户 其中,tty 终端为表示在本地命令行模式下打开的终端:p ...