前端学习——字体图标的选取和应用

一. CSS字体设置

通常我们设置CSS的字体的时候有以下几种方法

• 通过图片转换为图标在网页中引用（耗费资源）
• 精灵图，通过背景图片的坐标进行切换（需要对一张精灵图进行不停的切换坐标，并且不易于维护）
• 字体图标，将图标设立成字体来使用

下面讲的主要是第三种方法，字体图标，可以随意的改变图标的大小和颜色，并且易于维护

1.1 字体图标的优点

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

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

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

几乎支持所有的浏览器，最重要的是几乎支持所有的浏览器，这就很香

1.2 字体图标使用流程

1. 获得字体图标库或者UI人员生成的字体图标效果图
2. 将其导入自己的项目当中
3. 引入相关的CSS样式
4. 页面渲染调用即可

简而言之就是我们只是调用已经生成好的字体图标，并根据网页需求进行渲染即可

1.3 常见字体图标库

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

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

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

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

fontello
http://fontello.com/
在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。
Font-Awesome
http://fortawesome.github.io/Font-Awesome/
这个字体库更新比较快。目前已经有369个图标了。

Glyphicon Halflings
http://glyphicons.com/
这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

Icons8
https://icons8.com/
提供PNG免费下载，像素大能到500PX

这里只讲前两种

1.3.1 icomoon库

国内国外都有比较完整的字体图标库

国外的有

https://icomoon.io/

这里面有很多的字体图标选择项，选择下载即可

下面将一步一步的将字体图标导入自己的网页当中

打开网站之后会呈现这个页面

选择字体图标，点击右下角

下载字体图标

下载之后会出现一个压缩包，将压缩包压缩即可得到下面的文件

添加文件目录

这里面有两种调用方式

第一种引用方式

1. 编写CSS样式

2. 然后打开上面解压缩文件夹里面的demo.html网页

3. 然后在网页粘贴上

4. 然后打开网页就有了字体图标了

第二种

1. 这种比较简单，也比较推荐，引入解压缩中的style.css文件

2. 在body中使用i标签进行调用

3. 打开网页查看效果

以上就是icomoon库的使用方法，第二种调用方法比较方便也比较适合，推荐第二种

1.3.2 阿里icon fonts字体库

这个是国内使用偏多的一个字体库，里面包含的字体也有很多，基本满足开发了

下面就讲讲如何使用

https://www.iconfont.cn/

1. 打开网页进入到这个页面，选择需要的字体

2. 一步一步操作下载

3. 进入购物车后点击下载代码，然后点击，会自动下载一个压缩包
   

4. 进入压缩包就会发现里面的文件和icomoon库里面的文件一样，然后和上面一样调用即可

1.4 建站基本配置

网页小图标设置

每个网页上面都会有相应的网页图标

获取网页图标直接在网站的尾部添加上favicon.ico即可

将下载好的图标放在项目的目录文件夹下

然后根据下面代码调用即可

网站三大标签

• 题目
• 网站描述
• 关键字

都是为了方便检索的时候能够显示你的网站，这个现在的我用处不大

三. 总结

以上便是CSS字体图标的演示
最近在跟着网上写一个博客管理系统的项目，涉及到了前端和后端的协同开发，里面后端使用了Springboot和JPA，前端使用了Semantic UI
这里想说一下Semantic UI的强大，Semantic说起来是一个和Bootstrap差不多的一个组件库，在Bootstrap使用人增多的情况下，Semantic UI的一些组件处理都比较优秀，布局和Bootstrap也有些不同，里面一些字体图标也是比较多的，调用的方法基本都是上面说到的第二种方法调用，直接使用i标签进行调用，同时他的一个前端分页处理，前端表格处理，表单的处理各个方面都比较优秀。
目前我所涉及到的前端框架有四个，想安利安利

• Element UI 这个是基于Vue的一个前端框架，以前在学vue的时候视频中提到过，不过基本没有在自己的项目中用过，只是感觉里面页面元素也很简洁，里面也有很多实例，很适合后端人员的开发。
• Bootstrap 这个是一个组件库，里面的优点也比较多，用的人也很多，也很实用，组件实例丰富，这个我用的比较少，可能自己的审美有问题，不是很喜欢里面的一些组件元素
• Layui 这个也是一个组件库，这个是我用的最多的一个组件库了，里面很多组件都挺不错的，我刚开始用它的时候是要写一个后台页面的时候，那个时候不想自己写，就把里面的后台布局给拷贝下来了，毕竟CV工程师嘛，里面的分页很优秀很优秀很优秀！！！表格渲染做的也很棒，不过里面的富文本编辑器有些鸡肋
• Semantic UI 这个是刚刚接触的一个组件库，跟着前端大佬把一个页面完完全全写下来了，感觉调用很舒服，各种布局，标签之类的直接进行属性添加即可，用起来也很方便，有时间要好好看一看里面的组件实例。不过有一点不好，这个网站有时候进不去，也不知道是网的问题还是什么问题，就是进不去，而且里面全英文，对于我这个英语不好的人体验感挺差，不过这不妨碍他的强大。

以上就是这篇博客的全部了，写的不是很好，本人是一名刚步入前端的小白，很多东西都需要学习，大家看后有不对的欢迎评论，互相学习，共同进步！！！