字体图标的使用;
1. 推荐下载网站 icoMoon字体图标下载链接
本网站是外国服务器,加载速度会比较慢一点。但是超级好用啊;
2.推荐下载网站阿里妈妈网站也好用啊,点击下载吧
阿里妈妈国内的也很好用的!
重点啦啦啦啦——————都是免费的嘿!
- icoMoon使用方法
点击链接进去。。。
上面的部分相信大家伙肯定按照图片能下载到安装包吧,下面就看仔细啦!!!
- 我们的fonts文件一定要放在根目录下面,意思就是使我们的html页面在哪个目录下面,我们的fonts文件就要放在同一目录下面!
完了找到我们的stylse.css文件,复制前面一段代码,或者我下面给大家复制好的!
复制代码里面的第一段代码,也就是下面的几行代码!完事将下面这段代码放到你所写的CSS里面去-----字体声明
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?qs24s2');
src: url('fonts/icomoon.eot?qs24s2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?qs24s2') format('truetype'),
url('fonts/icomoon.woff?qs24s2') format('woff'),
url('fonts/icomoon.svg?qs24s2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
就像下面这样
我们来使用一下字体图标
我们给div添加一个字体图标!!!
点击demo.html文件,就会找到我们刚刚添加到的字体图标,然后复制后面的小框框,然后去我们的html文件里面粘贴到你想要添加到的地方啦
最后,我们将复制好的字体图标粘到需要添加的地方,然后去声明存放字体图标的盒子的字体样式。
就完了!!!!!!!!!!!!!!
就是下面这句话哈,也就是上面代码的第一句话给他复制下来就好啦
div {
font-family: 'icomoon';
}
完事我们来打开浏览器看一看!
小家伙出现了!
阿里的字体图标也大同小异,自己琢磨琢磨吧!