icomoon字体图标的下载与使用

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字体图标的下载与使用相关推荐

保姆级傻瓜式icomoon字体图标的下载与使用
官方网站: link 一.下载icoMoon字体图标 1.点击右上角 icoMoon App 2.点击自己想要的图标,选中后颜色会变亮 3.如果没有自己想要的,滑道底部点击Add lcons From ...
如何使用IcoMoon字体图标
如何使用IcoMoon字体图标一,字体图标工具: 1.登录字体图标网站:https://icomoon.io/app/#/select 2.Svg在线编辑工具:https://c.runoob.co ...
【icon图标】icon字体图标的下载与使用
下载链接: icomoon图标库:Icon Font & SVG Icon Sets ❍ IcoMoon(国外) 阿里巴巴图标库:iconfont-阿里巴巴矢量图标库(国内阿里巴巴图标库) ...
icomoon字体图标的使用
很久之前就学习过iconfont图标的使用,今天又遇到一个用icomoon字体图标写的案例,于是详细学习了一下,现整理如下. 一.下载 1.网址: https://icomoon.io/#home 2 ...
前端学习笔记：字体图标的下载网址
字体图标的下载 icomoon字库 http://icomoon.io 阿里iconfont字库 http://www.iconfont.cn/ 选择字体图标后下载压缩包,解压后把fonts这个文件夹 ...
CSS精灵图和字体图标及下载
精灵图和字体图标精灵图 1.1为什么需要精灵图? 1.2精灵图的使用 1.3精灵图总结字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引入 2.4字体图 ...
字体图标的下载【前端知识】
写在前面的话: 参考视频:黑马程序员pink老师 HTML CSS 入门教程下载图标官网地址:Icon Font & SVG Icon Sets ❍ IcoMoon 目录 1.选图标 2.下 ...
icomoon字体图标使用步骤
字体图标一般字体安装在c盘->windows->fonts 一.优点: 1.随意更改字体颜色,大小,缩放等 2.体积小 3.不增加请求 4.和图片效果一样 5.几乎支持所有浏览器,兼容性 ...
字体图标的下载和引用、问题解决——保姆级教程
字体图标字体图标其实就是显示网页中通用的小图标,它的本质属于字体优点轻量级:-一个图标字体要比一系列的图像要小.一旦字体加载了,图标就会马上渲染出来,减少了服务器请求灵活性:本质其实是文 ...

icomoon字体图标的下载与使用

icomoon字体图标的下载与使用相关推荐

最新文章

热门文章