前言
我们在编写前端的时候,只是运用前端三件套去实现页面效果,可能有自己不是很满意的,比如在一些场景下,想加一个图标,类似于这样的:如果是用图片呢,想一想应该是可以的,但是图片的颜色啥的自己不满意,想改成这样的:,更或者是这样的:。
总会有一种是自己喜欢的,即小巧又美观,样式设置也是非常的方便,怎样才能实现这样的功能呢?下面我将来介绍一下HTML页面引入这些小图标的方法。
一、介绍
其实啊,这些小图标也类似文字,只是显示的样子很独特而已,它能像文字一样实现改变大小、颜色、加粗等等效果,在编写网页的时候使用和更改样式也非常方便。
二、获取图标文件
这里我有两个网站可以下载得到图标文件,一个是icomoon, 一个是iconfont ,两个都是图标库
个人比较常用的是icomoon,网站是长这样的:Icon Font & SVG Icon Sets ❍ IcoMoon
网址是:Icon Font & SVG Icon Sets ❍ IcoMoon
1.首先点击右上角的IcoMoon App图标
然后就进入这个界面,你就可以选则你喜欢的或有需求的图标,下面的Select(6)是
选择了的图标数量
然后点击这个,就可以预览自己选择的图标,
然后继续点击Download就可以将图标文件的压缩包下载到本地了。
三、声明图标字体
下载好文件后,将其解压,就有了这些文件,上面我也说过图标字体跟文字很像,所以说他是字体
用vscode或者记事本等工具打开style.css文件,将前面的几行代码复制带css样式文件中,或者<style>标签中,这就是字体图的声明,声明就放在第一行就可以
四、引入fonts文件夹
接下来将fonts文件夹复制或移到自己项目下的样式文件的同一目录下,也就是要和css样式文件要放在一起,如果不放在一起就需要注意声明字体图标的那几行代码,
路径一定要对,不然字体图标显示不出来,
"./"表示于css文件同级目录下去找,"../"表示去父级目录中找,"../../"等等依次类推
五、复制图标到页面中
双击demo.html文件在浏览器中打开,
选择自己想要的图标,复制如图所示的那个小方框,别管那么多,将这个小框框复制到你需要添加图标的地方就引入了
复制到需要添加的地方:
六、设置字体
接下来最后一步就是设置字体,也是很关键的一步,在设置css样式中使用font-family属性,设置值为'icomoon',
font-family:'icomoon';//设置字体
你只需要把他当做文字一样设置就可以了,颜色大小等都可以做设置,
另外字体图标也可以做为伪元素添加,使用before或after,将字体图标的小方框复制到content:'';的内容中也可以,当然也别忘了设置font-family的属性值为'icomoon',
肯定有人好奇,小方框右边的e9aa是代表了什么,其实他跟小方框一样都代表了这个字体图标,不同的是需要有转义字符’\‘。
七、追加字体图标内容
如果没有下载到满意的图标,需要去重新下载的添加更多的图标,那就只需要重新引入fonts文件夹,将之前的fonts文件夹替换调就可以了