icomoon字体图标的使用与引用

字体图标的优点：
轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。

灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等。
网址 https://icomoon.io
进入icomoom首页后，找到IcoMoon App

然后选择你要下载的图片，选择Generate Font

然后右下角就成为Font Download，点击Download

这时下载好了，我们解压

icomoon的引入
解压后会有style.css的样式，我们复制@font-face

@font-face {font-family: 'icomoon';src:  url('fonts/icomoon.eot?p8n0n');src:  url('fonts/icomoon.eot?p8n0n#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?p8n0n') format('truetype'),url('fonts/icomoon.woff?p8n0n') format('woff'),url('fonts/icomoon.svg?p8n0n#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}

解压后里面有个demo.html

复制到html以后如下图所示，这时候还不能用，我们要指定字体

指定字体如下图所示

最后，打开浏览器，我的字体图标出来了，颜色也变了，大功告成。

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

字体图标的下载和引用、问题解决——保姆级教程
字体图标字体图标其实就是显示网页中通用的小图标,它的本质属于字体优点轻量级:-一个图标字体要比一系列的图像要小.一旦字体加载了,图标就会马上渲染出来,减少了服务器请求灵活性:本质其实是文 ...
如何使用IcoMoon字体图标
如何使用IcoMoon字体图标一,字体图标工具: 1.登录字体图标网站:https://icomoon.io/app/#/select 2.Svg在线编辑工具:https://c.runoob.co ...
保姆级傻瓜式icomoon字体图标的下载与使用
官方网站: link 一.下载icoMoon字体图标 1.点击右上角 icoMoon App 2.点击自己想要的图标,选中后颜色会变亮 3.如果没有自己想要的,滑道底部点击Add lcons From ...
icomoon字体图标的使用
很久之前就学习过iconfont图标的使用,今天又遇到一个用icomoon字体图标写的案例,于是详细学习了一下,现整理如下. 一.下载 1.网址: https://icomoon.io/#home 2 ...
icomoon字体图标的下载与使用
icomoon是外网一个免费的字体图标网站,我们在做网站页面时有的小图标不好截取,这是就可以在icomoon上很方便的选取我们需要的图标下载下来进行引用使用方法: 先进入icomoon网站中:Ico ...
精灵图与字体图标的区别和用法（附Icomoon字体图标的使用方法）
CSS苦逼学习日记(6) 精灵图 1.精灵图是什么?: 把许多小图标都放在一个大图片上,这样利用小图标的时候只需要重复使用多次利用同一张大图片,减少加载各种图片路径的时间,减小程序(网页)的运行速率, ...
icomoon字体图标库的使用
1.icomoon地址 Icon Font & SVG Icon Sets ❍ IcoMoonIcoMoon provides a package of vector icons, along ...
icomoon字体图标使用步骤
字体图标一般字体安装在c盘->windows->fonts 一.优点: 1.随意更改字体颜色,大小,缩放等 2.体积小 3.不增加请求 4.和图片效果一样 5.几乎支持所有浏览器,兼容性 ...
icomoon字体图标的引入
1.在网站(http://icomoon.io)中下载字体进入官网点击进入后即可选择字体(直接点击选择),加载得稍微有点慢,耐心等待. 若没有想要的,可直接下拉到网页最后点击在library ...

icomoon字体图标的使用与引用

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

最新文章

热门文章