在icomoon里面下载字体图标

使用网站: htttps://icomoon.io

步骤如下

1.打开网站，点击icomoon

2. 选择自己想要的字体图标，如果想要别的，可以点击下面 Add Icon From Library...里面有各种各样好看的图标嘿嘿（当然有些是是收费的，但是免费的就够用啦哈哈）选好之后，点击Generate Font 就可以下载啦

3.下载后会生成一个压缩包，把它解压一下

4.点开icomoon这个文件夹

5.将fonts这个文件夹复制到你所需要打开文件的目录下！重点

6. 点开style.css

将圈住的那一块代码复制到你建立的html里面的样式里

代码

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

再给标签定义字体, 此字体要与 @font-face里面的字体一致

 span {font-family: "icomoon";}

然后点开demo.html

出现这个，点击复制小方块到标签里面

就会出现

也可以更改颜色大小

成功啦！

最后如果想追加图标！

1.打开网址点击icoMoon App

2.再点击Import Icons

3.就会让你选择下载位置要选择压缩包里面的selection.json，然后再选自己想要的图标，重新下载压缩包，并替换原来的文件就可以啦

就这样，结束啦

在icomoon里面下载字体图标相关推荐

iconfont平台如何上传和下载字体图标
iconfont平台如何上传和下载字体图标打开iconfont网站,登录之后点击图中的上传图标点击上传图标,将设计师妹妹给我们的svg矢量图打开点击去除颜色并提交点击图中的批量操作,然后框 ...
icomoon下载字体图标
1.进入官网,点击右上角icomoon app 2.选择需要的字体图标,然后点击右下角generate font 3.点击download 4.下载,将压缩包解压,(保留,后续加新字体会用到),打开, ...
icomoon.io生成字体图标
1. 准备svg图片 2. 打开icomoon选择icomoon App 3. import icons 上传本地的svg图片 4. 点击选中以后点击generate fonts形成字体图标 5. p ...
字体图标的使用/iconmoon如何下载字体图标（保姆级）
1.什么是字体图标? 2.图标如何去下载? 3.字体图标的使用? 没有计划的人生仿佛是在作秀,事实上,我非常喜欢先提出问题再做出解答,我们明确了自己的目标,才能更加精确自己的答案. 那么我们快速进入今 ...
【icon图标】icon字体图标的下载与使用
下载链接: icomoon图标库:Icon Font & SVG Icon Sets ❍ IcoMoon(国外) 阿里巴巴图标库:iconfont-阿里巴巴矢量图标库(国内阿里巴巴图标库) ...
解决css字体图标如何下载使用
步骤一:建立一个文件夹,因为文件有点多,怕搞乱然后里面建立一个html文件.我建立的名字是iconfont.html.如下图: 步骤二:从网上下载字体图标.http://icomoon.io(免费的 ...
字体图标库-icomoon的使用方法
1.进入官网 icomoon官网地址:https://icomoon.io/ 2.进入官网后, ① 点击IcoMoon App ② 选择自己要的图标. ③ 会显示在Selection()里面. ④ 点 ...
精灵图与字体图标的区别和用法（附Icomoon字体图标的使用方法）
CSS苦逼学习日记(6) 精灵图 1.精灵图是什么?: 把许多小图标都放在一个大图片上,这样利用小图标的时候只需要重复使用多次利用同一张大图片,减少加载各种图片路径的时间,减小程序(网页)的运行速率, ...
CSS精灵图和字体图标及下载
精灵图和字体图标精灵图 1.1为什么需要精灵图? 1.2精灵图的使用 1.3精灵图总结字体图标 2.1字体图标的产生 2.2字体图标的优点 2.3字体图标的下载 2.4字体图标的引入 2.4字体图 ...

在icomoon里面下载字体图标

在icomoon里面下载字体图标相关推荐

最新文章

热门文章