目录

理论

一:字体图标

图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"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. Django+zTree构建组织架构树

    树,因其清晰明了的展现形式而被广泛的使用 日常的开发过程中我们需要经常与"树"打交道,例如公司的组织架构树.服务器的项目归属树,管理后台侧边树等等,本篇文章介绍关于树的两个内容 多 ...

  2. .Net Mvc判断用户是否登陆、未登陆跳回登陆页、三种完美解决方案

    开篇先不讲解,如何判断用户是否登陆,我们先来看用户登录的部分代码,账户密码都正确后,先将当前登录的用户名记录下来. public ActionResult ProcessLogin() { try { ...

  3. idea使用springboot的webservice基于cxf

    SpringBoot整合CXF实例: 服务端构建 <dependency> <groupId>org.apache.cxf</groupId> <artifa ...

  4. SecureCRT软件的个性化设置

    工欲善其事,必先利其器.如果我们能花点时间把每天工作都要用到的SecureCRT软件设置的舒服一些,日后工作起来也是会心情愉悦.事半功倍的. 1.日志文件设置 2.窗口配色和关键字高亮 3.效果展示 ...

  5. 单元测试之NUnit一

    NUnit 分三篇文章介绍,入门者可阅读文章,有基础者直接参考官方文档.初次写博客,望大家指点. 导航: 单元测试之NUnit一 单元测试之NUnit二 单元测试之NUnit三 NUnit是什么? N ...

  6. python 36 进程池、线程池

    目录 1. 死锁与递归锁 2. 信号量Semaphor 3. GIL全局解释器锁:(Cpython) 4. IO.计算密集型对比 4.1 计算密集型: 4.2 IO密集型 5. GIL与Lock锁的区 ...

  7. VScode 插件推荐与C/C++配置

    以下是我经常用到的VScode插件.由于插件本身具有详细的配置和介绍,不对插件本身的安装配置进行说明,仅仅支出这些插件的主要功能.具体使用强烈推荐看一下安装插件后的说明,大多数的问题和设置都可以找到, ...

  8. python程序中使用MySQL数据库

    目录 python程序中使用MySQL数据库 1 pymysql连接数据库 2 sql 注入 3 增删改查操作 4 pymysql使用总结 python程序中使用MySQL数据库 1.python中使 ...

  9. MySql定时器,亲测可用

    1. 查看数据库的event功能是否开启,在MySql中event默认是关闭的,需要查看并且要确保event处于开启状态 sql:show VARIABLES LIKE '%sche%'; 如果eve ...

  10. JDBC主要API学习总结

    JDBC主要API学习 一.JDBC主要API简介 JDBC API 是一系列的接口,它使得应用程序能够进行数据库联接,执行SQL语句,并且得到返回结果. 二.Driver 接口 Java.sql.D ...