字体图标 icon-font

轻量级：一个字体图标要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求

灵活性：本是其实是文字，可以很随意的改变颜色，产生阴影透明效果旋转等

兼容性：几乎支持所有的浏览器，请放心使用

注意：字体图标不能代替精灵技术，只是对工作中图标部分技术的提升和优化

总结：

1. 如果遇到一些结构和样式比较简单的小图标，就用字体图标

2. 如果遇到一些结构和样式复杂一点的小图片，就用精灵图

字体图标的下载

icomoon字库 http://icomoon.io

阿里 iconfont 字库 http://www.iconfont.cn

1. 把下载包里面的 fonts 文件夹放入页面根目录下

2. 字体图标的引入

在 CSS 样式中全局生命字体：简单理解把这些字体文件通过 CSS　引入到我们的页面中，　一定要注意字体文件路径的问题

@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?iy37iv');
src: url('fonts/icomoon.eot?iy37iv#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?iy37iv') format('truetype'),
url('fonts/icomoon.woff?iy37iv') format('woff'),
url('fonts/icomoon.svg?iy37iv#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}

3. html 里面添加字体小图标

例如： < span >  < span >

4. 给 span 声明一个字体

css 里面

span { font-family: 'icomoon'; }

<!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>Document</title><style>@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?iy37iv');src: url('fonts/icomoon.eot?iy37iv#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?iy37iv') format('truetype'),url('fonts/icomoon.woff?iy37iv') format('woff'),url('fonts/icomoon.svg?iy37iv#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}span {font-family: 'icomoon';}</style>
</head><body><span></span>
</body></html>

字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

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

字体图标 icon-font相关推荐

字体图标 icon font
原文地址为: 字体图标 icon font Icon font icon font 指的是用字体文件取代图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点大小可以自由 ...
如何在移动端app中应用字体图标icon fonts （转）
原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...
如何在移动端app中应用字体图标icon fonts
How to use icon fonts in your mobile apps 在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标. 移动端的设计变的越来越复杂.原因在于多样的屏幕尺 ...
css icon设置,CSS之字体图标 icon 的多种实现
什么是icon?让我们先来看一个例子: 我们以简书为例子,图中看到的用圆圈起来的部分都是icon 这个时候你就想问了,这不就是几张图片么? 不,它不是图片,而是文字什么??这怎么可能是文字,文字怎么 ...
CSS3基础：字体图标icon的使用
进入网站:Icon Font & SVG Icon Sets ❍ IcoMoon 点右上角iconmoon app 然后选择并下载需要的字体,得到zip文件,会有一堆文件: 解压之后将font ...
CSS - icon图标(icon font)
1. 概念这个小红点是图标,图标在CSS中实际上是字体. 2. 为什么出现本质是字体的图标? 2.1 图片增加了总文件的大小. 2.2 图片增加了额外的http请求,大大降低网页的性能. 2.3 图 ...
WinForm和WPF中使用字体图标ICON
Winform中使用桌面图标: 1.从https://www.iconfont.cn/ 网址下载对应的图标 2.新建一个Winform项目,创建字体类 (1)图中1是在突变网站下载的字体,放到根路径下 ...
让字体图标代替雪碧图，减少请求带宽
一.什么是字体图标 icon font 及使用场景从百度百科一下什么事icon font,没有解析.那就用在使用过程的对字体图标的理解,解释一下. 字体图标就是利用字体来显示网页中的的纯色图标,或 ...
原生小程序之引入 icon字体图标
目录原生小程序之引入 icon字体图标字体图标的配置原生小程序之引入 icon字体图标 icon官网 01:挑选对应的字体图标 02:添加入项目 ( 需要自己创建一个项目 ) 03:点击下 ...
字体图标(font-icon)，你还有什么理由不使用它？
优点下面的简介来自,著名字体图标库Font Awesome的首页,http://fontawesome.io: Font Awesome gives you scalable vector icon ...

字体图标 icon-font

字体图标 icon-font相关推荐

最新文章

热门文章