字体图标随着众多项目的开发,变得不可或缺,它在一定程度上减少了过度使用图片导致的资源占用问题,图片失真问题,通过代码的方式让图标更加轻量化,同时也提高了项目的运行性能哦,下面给大家简单分享下自己学习的过程呐
一、如何生成字体图标
1>首先,下载需要生成字体图标的图片,那么你可以到网站(矢量图,各种图)(阿里巴巴图标库) https://www.iconfont.cn/
寻找你需要的(svg)格式的图片并下载到本地,可自定义图片颜色和大小。
2>打开网站 https://icomoon.io/ 找到那个紫色的按钮点它,如下图
完后点击左上角如图按钮,导入你刚才下载到本地的svg图标,如下所示
然后点击右下角的Generate Font 按钮,如图
就会跳到此页面
点击Download按钮,就会将生产的字体图标文件下载到你的本地了哦。
二、使用方式
文件的目录格式如图,通常我们只需要以下我圈出来的两个文件就可以啦,将这两个目录拷贝到你的项目中
(1)style.css代码如下:
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?75p0ri');
src: url('fonts/icomoon.eot?75p0ri#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?75p0ri') format('truetype'),
url('fonts/icomoon.woff?75p0ri') format('woff'),
url('fonts/icomoon.svg?75p0ri#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
(2)在页面中,我们只要给一个元素添加相应的类名就行,那么我们回到这里来,点击中间的按钮selection
点击selection按钮后跳转到该页面,选择你导入的图标,此时统计图标个数变为5
再次点击Generate Font按钮,回到如下页面,点击Get Code将显示图标对应的对吗片段
复制如图所示的css代码到style.css文件中逐个进行添加
添加成功后的css代码如下图
/*
* @Author: liwen
* @Date: 2018-12-24 11:27:27
* @Last Modified by: liwen
* @Last Modified time: 2018-12-24 11:29:53
*/
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?75p0ri');
src: url('fonts/icomoon.eot?75p0ri#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?75p0ri') format('truetype'),
url('fonts/icomoon.woff?75p0ri') format('woff'),
url('fonts/icomoon.svg?75p0ri#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-checkCode:before {
content: "\e900";
color: #fff;
}
.icon-hide:before {
content: "\e901";
color: #fff;
}
.icon-password:before {
content: "\e902";
color: #fff;
}
.icon-show:before {
content: "\e903";
color: #fff;
}
.icon-user:before {
content: "\e904";
color: #fff;
}
好啦~~,代码可以引入到你的项目中玩儿去啦
想了解更多前端资料长按识别二维码关注小姐姐,阅读美文还能免费领取前端资料哦,笔芯笔芯