admin管理员组文章数量:1615211
icomoon是外网一个免费的字体图标网站,我们在做网站页面时有的小图标不好截取,这是就可以在icomoon上很方便的选取我们需要的图标下载下来进行引用
使用方法:
先进入icomoon网站中:Icon Font & SVG Icon Sets ❍ IcoMoonIcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites. Browse among thousands of pixel perfect icons or import your own vectors.https://icomoon.io/
然后点击右上角IcoMoon App进入主页面
这时会出现很多小图标,选择我们需要的图标,Selection中会显示我们选择的图标个数,点击Generate Font生成字体图标
当这个页面中没有我们需要的图标时,我们可以点击左下角Add Icons From Library 去选择更多的需要的图标
此时我们选择的图标就会显示出来,点击Download下载图标,会生成一个压缩包 ,解压之后会有以下文件夹
* 将其中的fonts文件夹放到项目的根目录中,使用时打开demo.html选择需要的字体对后边的小方框进行复制粘贴即可,在引入字体图标时需要在CSS插入一段代码:
注意:当字体图标显示不出来时,可能是url后边的路径不对,根据自己存放路径进行更改
@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-style: normal;
font-weight: normal;
font-display: block;
}
在html引入字体时:
<span></span>
css需要添加字体样式:
span {
font-family: 'icomoon';
}
版权声明:本文标题:icomoon字体图标的下载与使用 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1728705364a1170174.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论