css字体图标

千次阅读

2021-05-15 10:04:46

css字体图标引入方法

在网页中将小图标制作成字体是很多网站的常用做法，为的是减少页面请求。

先推荐一个字体图标库（阿里巴巴矢量图标库）

https://www.iconfont.cn/

一、首先根据项目按需选择好自己需要的图标，添加至入库

二、都选好后，将库中的图标添加至项目中，没有项目可先创建项目，添加在项目里后，将项目下载至本地，解压出来即可

三、最后就可以在代码中引入图标了（字体图标文件里的html文件里可打开查看图标的代码）

注意：需要在@foot-face中修改url地址，定位到字体图标文件夹中方可引入成功

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>仪器</title>
  <!-- <link rel="stylesheet" href="css/index.css"> -->
  <style>
    /* 引入字体图标 */
    @font-face {
      font-family: 'iconfont';
      src: url('foot/iconfont.woff2?t=1621044854968') format('woff2'),
        url('foot/iconfont.woff?t=1621044854968') format('woff'),
        url('foot/iconfont.ttf?t=1621044854968') format('truetype');
    }

    /* 定义使用 iconfont 的样式 */
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  </style>
</head>

<body>
  <p class=".iconfont">&#xe66b;</p>
</body>

</html>

四、可选择第二种引入方式fontclass方式使用link引入字体图标

 <link rel="stylesheet" href="./icon-font/iconfont.css">
</head>

<body>
  <i class="iconfont">&#xe658;</i>
</body>

css html css3

更多相关内容

CSS字体图标
2022-04-25 14:19:44
字体图标 图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。...
字体图标

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出现了，额不是出现了，是以前就有，是被从新"宠幸"了。这就是字体图标（iconfont)。（字体图标就是字体，其实字体是画出来的，以画字体的方式画图标，就是字体图标）

字体图标优点
可以做出跟图片一样可以做的事情,改变透明度、旋转度，等.. 但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等... 本身体积更小，但携带的信息并没有削减。几乎支持所有的浏览器移动端设备必备良药...
字体图标使用流程

总体来说，字体图标按照如下流程：

设计字体图标

假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作，他们在 illustrator 或 Sketch 这类矢量图形软件里创建 icon图标，比如下图：

之后保存为svg格式，然后给我们前端人员就好了。

其实第一步，我们不需要关心，只需要给我们这些图标就可以了，如果图标是大众的，网上本来就有的，可以直接跳过第一步，进入第三步。

上传生成字体包

当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼容性的适合各个浏览器的。

推荐网站： http://icomoon.io

icomoon字库

IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢。

推荐网站： iconfont-阿里巴巴矢量图标库

阿里icon font字库

iconfont-阿里巴巴矢量图标库

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。一个字，免费，免费！！

fontello

Fontello - icon fonts generator

在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。

Glyphicon Halflings

GLYPHICONS - Visual language that everybody understands

这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

Icons8

Free Icons, Clipart Illustrations, Photos, and Music

提供PNG免费下载，像素大能到500PX

下载兼容字体包

刚才上传完毕，网站会给我们把UI做的svg图片转换为我们的字体格式，然后下载下来就好了

当然，我们不需要自己专门的图标，是想网上找几个图标使用，以上2步可以直接省略了，直接到刚才的网站上找喜欢的下载使用吧。

字体引入到HTML

得到压缩包之后，最后一步，是最重要的一步了，就是字体文件已经有了，我们需要引入到我们页面中。
1. 首先把以下4个文件放入到 fonts文件夹里面。通俗的做法
第一步：在样式里面声明字体：告诉别人我们自己定义的字体
```
@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";
}
```
或者
```
<span></span>  
```
追加新图标到原来库里面

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

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

转自：CSS字体图标 - 阿江是个程序猿 - 博客园
收起
展开全文
字体图标 fonticon
css字体图标的使用
千次阅读 2022-03-30 11:50:18
方法1:使用2个类名引入字体图标 方法2:使用unicode编码方法3:使用伪元素字体图标 方法4:使用在线字体图标 前言公司UI美工的小姐姐没有上传字体图标怎么办?! 那就自己动手吧￣▽￣一、下载首先是...
目录

一、下载

二、使用方法

前提:引入

方法1:使用2个类名引入字体图标

方法2:使用unicode编码

方法3:使用伪元素字体图标

方法4:使用在线字体图标

前言

公司UI美工的小姐姐没有上传字体图标怎么办?! 那就自己动手吧￣▽￣

一、下载

首先是找到免费的网站去下载,当然是www.iconfont.cn 里面随便找,不过要先注册emmm
- 登录(新浪微博) → 选择图标 ,加入购物车 → 添加至项目 → 下载到本地
- 下载之后,点开文件中的网页也是自带的引入方法
二、使用方法

新建fonts文件,将下载的其中四个文件放入,方便外联

引入代码:
```
<link rel="stylesheet" href="./fonts/iconfont.css">
```
方法1:使用2个类名引入字体图标
- 第一个类名iconfont 目的是告诉这是字体图标.不是普通的文字
- 第二个类名是字体图标自带的，用来告诉使用哪个小图标
- 代码如下
```
  <style>

    .icon-icon-test1 {
      color: red;
      font-size: 60px;

    }
  </style>

   <body>

    <i class="iconfont icon-icon-test1" > </i>

   </body>
```
方法2:使用unicode编码
- 直接标签放入编码
- html代码:
```
 <i class="iconfont"> &#xe63b; </i>  
```
- css代码:
```
.iconfont {
      fontsize:30px;
      color:red;
}
```
方法3:使用伪元素字体图标
- 保留unicode编码后四位,前面所有编码用 \ 代替
- css代码如下
```
 div {
      font-family: 'iconfont';
    }
```
```
div::after {
    content: "\e63b";
}
```
注意：使用伪元素字体图标，一定要声明字体。 font-family: 'iconfont'

方法4:使用在线字体图标
- 在阿里字体图标网页中查看在线链接
```
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3276121_9b9eepa4f57.css">

<i class="iconfont icon-xxx"></i>
```
- 复制链接引入时,记得手动添加http: 或者https
  好了就这里结束了,下次摸鱼再来分享
收起
展开全文
css
CSS字体图标的使用
千次阅读 2021-11-20 12:55:56
文章目录1、字体图标1.1、字体图标的产生1.2、字体图标的使用1.2.1、字体图标的下载1.2.2、字体图标的下载1.2.2、字体图标的引入1.2.3、字体文体格式1.2.1、字体图标的追加 1、字体图标 1.1、字体图标的产生一、...
文章目录

1、字体图标
1.1、字体图标的产生
1.2、字体图标的使用
1.2.1、字体图标的下载
1.2.2、字体图标的下载
1.2.2、字体图标的引入
1.2.3、字体文体格式
1.2.1、字体图标的追加
1、字体图标

1.1、字体图标的产生

一、字体图标使用场景：
主要显示网页中通用、常用的小图标。

二、精灵图有诸多优点，但缺点也很明显：
1. 图片文件相对较大。
2. 图片本身放大和缩小会失真。
3. 图片制作完毕想要更换相对复杂。
三、为了解决上述问题，有一种技术就是字体图标iconfont。
1. 字休图标为前端开发人员提供了一种方便高效的图标使用方式，展示的是图标，本质属于字体。
四、字体图标的优点
1. 轻量级：一个图标字体要比图像小。一旦字体加载，图标马上渲染，减少了服务器请求.
2. 灵活性：本质是文字，可以随意更改颜色、产生阴影、透明效果、旋转等。
3. 兼容性：几乎支持所有浏览器。
注意：字体图标不能完全替代精灵图。

1.2、字体图标的使用

1.2.1、字体图标的下载
- icomoon字库：http://icomoon.io
  icoMoon成立于2011年，推出了第一个自定义图标字体生成器，它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，唯一的遗憾是国外服务器，打开速度较慢。
- 阿里iconfont字库：http://www.iconfont.cn
  阿里妈妈M2UX的一个iconfont字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用AI制作图标上传生成。重点，免费。
1.2.2、字体图标的下载

一、进入http://icomoon.io，点击【IcoMoon App】

二、选择自己需要的图标，点击【Generate Font】生成字库

三、预览自己选中的字体图标，点击【Download】下载

四、解压后得到下图中的文件。

五、style.css中的@font-face可以在style标签中声明字体。

六、demo.html中可查看每个图标的表示方法

1.2.2、字体图标的引入
1. 把下载好的字体图标文件里的fonts文件夹放入页面根目录
2. 在CSS样式中全局声明字体：把style.css中的@font-face复制到style标签中。
3. 一定注意字体路径的问题。
```
<style>
    @font-face {
        font-family: 'icomoon';
        src: url('fonts/icomoon.eot?mqxkex');
        src: url('fonts/icomoon.eot?mqxkex#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?mqxkex') format('truetype'),
            url('fonts/icomoon.woff?mqxkex') format('woff'),
            url('fonts/icomoon.svg?mqxkex#icomoon') format('svg');

        font-weight: normal;
        font-style: normal;
        font-display: block;
    }

    span {
        /*指定的定体要和声明的字体一致*/
        font-family: icomoon;
        font-style: 50px;
        color: red
    }
</style>


<span></span>
```
展示效果如下：

1.2.3、字体文体格式

fonts文件夹下包含四种格式如下：

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，是因为包含了主流浏览器支持的字体文件。
1. TureType（.ttf）格式：.ttf字体是Windows和Mac最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、IOSMobile\Safari4.2+
2. Web Open Font Format（.woff）格式：.woff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Sfari3.6+、Opera11.1+
3. Embedded Open Type（.eot）格式：.eot字体是IE志用字体，支持这种字体的浏览器有IE4+;
4. SVG（.svg）格式：.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、IOSMobile Safari3.2+
1.2.1、字体图标的追加

把selection.json重新上传，然后选中自己想要的新的图标，重新下载压缩包，并替换原来的文件即可。
一、点击【import icons】，上传selection.json文件。

二、上传成功，展示之前选择的图标，见下图。

三、重新添加或删除图标后，重新生成字库，即可。
收起
展开全文
CSS——web字体与CSS字体图标
千次阅读 2020-07-09 14:34:24

文章目录web字体字体格式字体图标字体图标优点字体图标使用流程设计字体图标上传生成字体包下载兼容字体包字体引入到HTML第一步：在样式里面声明字体：告诉别人我们自己定义的字体第二步：给盒子使用字体第三步：...

收起

css html svg
css字体图标和文字居中
2021-01-18 15:39:00

方法一 <!... <... <head>...meta charset="UTF-8">...link rel="stylesheet" href="./css/iconfont.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc

收起

css css3 vue.js html
css 字体图标更改颜色_在CSS中更改字体
千次阅读 2020-07-29 18:47:01

css 字体图标更改颜色 CSS字体属性 (CSS font properties ) Font properties in CSS is used to define the font family, boldness, size, and the style of a text. CSS中的字体属性用于定义字体系列，粗体， ...

收起

css css3 html python java
CSS实现精灵图与字体图标
2021-01-19 21:21:58

精灵图：在以前，每个图片资源都是独立的一张张图片，浏览器访问网站中的不同网页时是重复获取这一张张图片的，这代表需要访问很多次资源。为了减少资源的访问次数，将多个常用的图片集合到一张图片中（网页的缓存...

收起
css 图像字体，图标例子
2018-07-14 09:49:02

HTML5 图形字体图标例子

收起
CSS字体图标的生成和使用
千次阅读 2018-12-24 12:16:16

字体图标随着众多项目的开发，变得不可或缺，它在一定程度上减少了过度使用图片导致的资源占用问题，图片失真问题，通过代码的方式让图标更加轻量化，同时也提高了项目的运行性能哦，下面给大家简单分享下自己学习的...

收起
CSS之字体图标
2022-04-23 11:43:43

1.字体图标的产生 字体图标使用场景：主要用于显示网页中使用，常用的一些小图标。精灵图是由许多优点的，但是缺点明显。 1.图片文件还是比较大的。 2.图片本身放大缩小会失真。 3.一旦图片制作完毕要想更换非常...

收起

html css
css字体图标iconfont 使用方法
千次阅读 2016-07-08 09:14:09

css字体图标iconfont

收起

css 字体图标
解决css字体图标如何下载使用
2021-01-31 17:33:28

步骤二：从网上下载字体图标。http://icomoon.io（免费的）步骤三：将文件解压到和你html文件相同级上，如下图（另外这些都是解压出来的文件文件夹）：步骤四：用记事本的方式打开style.css的内容，复制一下...

收起

css
CSS文件中字体图标失效
2021-08-29 10:22:59

CSS文件中字体图标失效字体声明注意因为css文件是在css文件夹里，所以要修改url 前面加上 …/

收起

css html
CSS——字体图标、平面转换、缩放
2022-04-05 18:13:23

一、字体图标 字体图标主要用于网页中通用、常用的一些小图标；精灵图的缺点：1、图片文件大； 2、图片放大和缩小会有失真的问题； 3、一旦图片制作完成想要更换非常复杂。 字体图标iconfont，展示的是图标，...

收起

css3
CSS基础：浅用字体图标（以阿里字体图标库演示）
2022-03-10 12:05:01

字体图标可以为前端又有了一种更加方便高校的图标使用方式：展示的是图标，本体属于字体。看一下淘宝中购物车：看着是一个图片，其实具有字体的特征。可以通过浏览器工具调整一下其颜色：可以

收起

css 字体图标阿里字体图标
iconfont字体图标以及css字体图标在线制作和使用（推荐）
千次阅读 2018-12-26 10:30:21

字体图标的制作和使用呢，也不一定非要自己去 ...（一）字体图标的生成 1&gt;进入到（阿里巴巴图标库） https://www.iconfont.cn/ 并登录 ,搜索到你想要的图标并加入购物车，想要多少加多少哈哈加入购...

收起
认识CSS中字体图标(示例代码)
2021-08-04 09:00:43

前端之HTML，CSS(十一)字体图标使用文字做出小图标的效果并超越了小图标应用精灵图，使得图标变得灵活，减少了请求次数，优化了界面的性能。字体图标本身为矢量图。字体图标的使用过程1.UI设计字体图标效果图使用...

收起
css字体图标浏览器兼容解决方案
2016-01-08 11:51:30

Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。 css字体图标解决方案

收起
在css中使用字体图标库
2020-08-27 09:30:15

1.css引入svg图片并修改大小 html <div class="icon"></div> css .icon{ background-image: url(/icon.svg); width:19px; height:24px; background-size: 19px 24px; } 使用 background-size和...

收起

css svg
CSS进阶：字体图标的加载和使用（开发常用）
2022-03-24 11:01:35

1. 字体图标的产生 2. 字体图标的优点 3. 字体图标和精灵图的总结 4. 字体图标的下载 5. 字体图标的引入 6. 字体图标的追加 1. 字体图标的产生 字体图标的使用场景：主要用于在网页中通用、常用的一些小...

收起

css vscode html
css之字体图标
2018-01-16 16:04:49

SVG与字体图标 SVG图片是矢量图片，不会随着图片的伸缩而影响质量，通常把只有一种颜色的图标做成SVG，通过SVG生成字体图标，放到项目中使用。 https://icomoon.io/是一个比较快捷的生成字体图标的线上工具，进入...

收起

字体图标 css
[css]网页中字体图标的使用
2022-02-09 21:57:28

ps：引入字体图标css文件放在最上面。第一种使用方式复制相关文件在本地（fonts）目录下，并引入字体图标css文件标签使用字体图标，必须调用两个类名第二种使用方式（Unicode引用）复制相关文件在...

收起

css css3
【CSS】css快速更改某个字体图标，使用content插入字符
2022-04-01 09:05:39

遇到一个小问题：使用的是组件库，但是这个组件没有提供更改图标的接口，需要更改这个特定的图标，但是最好不更改dom 解决办法由于系统已经使用了这个组件库，那么就有了他的图标内容，可以先到组件库官网找到需要...

收起

css3