在我们查看网页代码的时候,会经常看到这样的符号
可以看到红色框框里i标签里边的一个矩形框,这个矩形框实际上就是第一个红色框里的
这个符号。这个符号仍然拥有字体样式的一些属性,我们也可以对它进行大小,加粗,倾斜等一系列的样式处理。这就是我们常说的字体图片。
那么我们的字体图片是怎么引进我们网页中来的呢。
这些图片其实都是我们通过网站来引进我们的网页中的
推荐给大家几个比较好用的网站:
https://icomoon.io/ 图标字体和SVG图标集(国外的网站,打开i可能会比较慢)
http://iconfont.cn/ 阿里巴巴矢量图标库
我们以https://icomoon.io/ 给大家举个例子把:
这是网站的首页,我们点击
出现了好多小图标,我们随便选择几个,大家到时候如果需要的话可以直接在search框内进行搜索自己想要的图标
点击Generate Font 后,在下一个页面点击
大家在弹出来的选择框内选择自己想要保存的地址
我将他直接保存在了桌面上
将它解压,解压后会出现一个文件夹
大家将这个fonts文件夹复制,粘贴到自己的demo的文件夹里边
然后我们打开上边文件夹里的demo.html
这些就是我们刚才添加的字体
接下来我们把自己需要引入的图标后边的小框框复制,粘贴到自己的代码里
这样就结束了吗?
没有,来我们在进行最重要的一步
@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;
/* 倾斜字体变正常 */
}
这些代码就是我们所引入的icomoon的css初始化样式,大家只要复制粘贴即可
最后一步:
span {
font-family: 'icomoon';
font-size: 100px;
color: pink;
}
我们得告诉浏览器,我们的font-family是icomoon的,这样一来我们就可以实现我们想要的效果了
ico图标是UI专门做出来的矢量图,大家可以对其像文字一样处理。
最容易忘记的地方就是要引入ico默认的css初始化样式了,还有font-family:“icomoon”;的引入。
希望对大家有所帮助。