目录

理论

一:字体图标

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

1: 字体图标优点

可以做出跟图片一样可以做的事情,改变透明度、旋转度,等..

但是本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果等等...

本身体积更小,但携带的信息并没有削减。

几乎支持所有的浏览器

移动端设备必备良药...

2:字体图标使用流程

总体来说,字体图标按照如下流程:

3: 设计字体图标

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

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

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

4:上传生成字体包

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

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

4.1:**icomoon字库**

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

推荐网站: http://www.iconfont.cn/

4.2:**阿里icon font字库**

http://www.iconfont.cn/

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

4.3:**fontello**

[http://fontello.com/](http://fontello.com/)

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

4.4:**Font-Awesome**

[http://fortawesome.github.io/Font-Awesome/](http://fortawesome.github.io/Font-Awesome/)

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

4.4:**Glyphicon Halflings**

[http://glyphicons.com/](http://glyphicons.com/)

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

4.5:**Icons8**

[https://icons8.com/](https://icons8.com/)

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

5: 下载兼容字体包

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

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

6:字体引入到HTML

6.1:得到压缩包之后,最后一步,是最重要的一步了, 就是字体文件已经有了,我们需要引入到我们页面中。

6.2:第一步:在样式里面声明字体: 告诉别人我们自己定义的字体

css

@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;

}

6.3:给盒子使用字体

css

span {

font-family: "icomoon";

}

6.4::盒子里面添加结构

css

span::before {

content: "\e900";

}

或者

<span></span>

二:追加新图标到原来库里面

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

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

实践

007:CSS字体图标的更多相关文章

  1. Css - 字体图标

    Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...

  2. css字体图标的制作和使用。

    css字体图标的制作和使用. 在项目开发的过程中,我们会经常用到一些图标.但是我们在使用这些图标时,往往会遇到失真的情况,而且图片数量很多的话,页面加载就越慢.所以,我们可以使用字体图标的方式来显示图 ...

  3. css字体图标的使用方法

    提要:对于传统的一般用css雪碧(css sprite)来搞,目前大部分网站已经主要字体图标 ,利用font+css 或者font+html 来开发,今天总结了一下,记录之~ css sprite用背 ...

  4. CSS字体图标

    一.什么是字体图标: 1. 字体图标可以和图片一样改变透明度,旋转度,等等 2.本质是文字,可以改变大小颜色等等比较适用于移动端 总结;图标字体具有矢量效果,放大缩小不失真,而且可以使用CSS任意更改 ...

  5. css - 字体图标的制作

    很多的时候我们在开发过程中一般都是直接使用图片,尤其在移动页面频繁请求图片对性能不是很好 ,所以图标字体的应用也越来越广泛.一般情况下直接用的是font awesome字体,但是有时候需要制作自己风格 ...

  6. css字体图标的制作

    我介绍的这个办法是直接在 "阿里巴巴图标库"中制作的,方便快捷 1. 首先到 "阿里巴巴图标库"中找到你想要的图片,然后选择加入购物车 接着我们点击右上角的购物 ...

  7. react+webpack 引入字体图标

    在使用react+webpack 构建项目过程中免不了要用到字体图标,在引入过程中报错,不能识别字体图标文件中的@符,报错 Uncaught Error: Module parse failed: U ...

  8. 字体图标转base64

    如果你在阿里矢量库下载了字体图标在项目引入无法显示时,可以把图标转成base64 在线转换的链接 https://transfonter.org/ css字体图标的制作

  9. h5-web字体和字体图标

    想要使用可以在: https://www.iconfont.cn/webfont?spm=a313x.7781069.1998910419.d81ec59f2#!/webfont/index :是we ...

随机推荐

  1. 因为配置了Always-On导致的无法Drop Login...

    一个sysadmin离职了,但是因为之前是他配置的Always-on,所以试图Drop他的login就会失败,原因是这个login会赋予一个叫做“Hadr_endpoint”的endpoint权限,并 ...

  2. Code signing is required for product type 'Unit Test Bundle' in SDK 'iOS 11.0.1'

    Code signing is required for product type 'Unit Test Bundle' in SDK 'iOS 11.0.1' 进入 projects and lis ...

  3. net core WebApi——文件分片下载

    目录 前言 开始 测试 小结 @ 前言 上一篇net core WebApi--文件分片上传与跨域请求处理介绍完文件的上传操作,本来是打算紧接着写文件下载,中间让形形色色的事给耽误的,今天还是抽个空整 ...

  4. js 前端实现打印功能

      // 此处是一个打印的方法  可以在点击事件的时候调用 dayin = () =>{ // 获取当前页面要打印的内容  // 这里的className(‘print’)是我给要打印的区域起的 ...

  5. 【原创】Linux cpufreq framework

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...

  6. postman 接口参数化操作

    最近一直忙于AI模型的准确率任务中,这种操作需要大量的数据才能计算出模型的准确率.所以这里问遇到的问题和之前数据随机参数化有点不同,之前的参数比如说用户姓名或用户身份证号,这样数据可以在postman ...

  7. requests.get爬虫模块参数

    地址和请求头参数--url和header res = requests.get(url,headers=headers) 向网站发起请求,并获取响应对象 参数 url :需要抓取的URL地址 head ...

  8. 前端利器躬行记(3)——webpack基础

    webpack是一个静态模块打包器,此处的模块可以是任意文件,包括Sass.TypeScript.模板和图像等.webpack可根据输入文件的依赖关系,打包输出浏览器可识别的JavaScript.CS ...

  9. C# 开发 BIMFACE 系列

    本系列文章主要介绍使用 C# .ASP.NET(MVC)技术对 BIMFace 平台进行二次开发,以满足本公司针对建筑行业施工图审查系统的业务需求,例如图纸模型(PDF 文件.二维 CAD 模型.三维 ...

  10. ios APP上的自动化测试

    1. 下载 http://blog.manbolo.com/2012/04/08/TestAutomation.zip%20 2. 开发工具安装:http://jingyan.baidu.com/ar ...