如何使用IcoMoon字体图标

一，字体图标工具：

1.登录字体图标网站：https://icomoon.io/app/#/select

2.Svg在线编辑工具：https://c.runoob.com/more/svgeditor

二、如何使用：

1.首先登录字体图标网站，选择：New Set From Selection创建自己的Icon集

注：必须先下载有自己的.svg文件才可以Imports Icons

　　编辑图标时，图标的命名不要与通用名冲突

2.可以点击Add Icons From Library自己添加Icon：

3. 选择字体图标并创建：

4.下载之前先进行设置，可以重命名，但不要与通用名冲突，然后点击DownLoad进行下载：

下载：

设置：

5. 下载到icomoon.zip压缩文件夹：

6.文件夹中内容：

7.应用：将fonts文件夹全部内容与style.css放到项目中：

1）在项目中建立一个目录icon-font，将解压后的文件放到建立的目录下（保留selection.json文件，方便二次编辑字体图标）：

2）在项目的主.scss文件中引入style.css（上图中的dictationToolApp.scss）：

3）在项目应用icon的位置写：

4）webpack --w 命令打包时会在builds文件夹下生成fonts文件夹：

5）在IcoMoon下载的图标就可以用了：

转载于:https://www.cnblogs.com/Michelle20180227/p/9116736.html

如何使用IcoMoon字体图标相关推荐

保姆级傻瓜式icomoon字体图标的下载与使用
官方网站: link 一.下载icoMoon字体图标 1.点击右上角 icoMoon App 2.点击自己想要的图标,选中后颜色会变亮 3.如果没有自己想要的,滑道底部点击Add lcons From ...
icomoon字体图标的使用
很久之前就学习过iconfont图标的使用,今天又遇到一个用icomoon字体图标写的案例,于是详细学习了一下,现整理如下. 一.下载 1.网址: https://icomoon.io/#home 2 ...
icomoon字体图标的使用与引用
字体图标的优点: 轻量级:一个图标字体要比一系列的图像要小.一旦字体加载了,图标就会马上渲染出来,减少了服务器请求. 灵活性:本质其实是文字,可以很随意的改变颜色,产生阴影,透明效果,旋转等. 网址 ...
精灵图与字体图标的区别和用法（附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字体图标的下载与使用
icomoon是外网一个免费的字体图标网站,我们在做网站页面时有的小图标不好截取,这是就可以在icomoon上很方便的选取我们需要的图标下载下来进行引用使用方法: 先进入icomoon网站中:Ico ...
icomoon字体图标的引入
1.在网站(http://icomoon.io)中下载字体进入官网点击进入后即可选择字体(直接点击选择),加载得稍微有点慢,耐心等待. 若没有想要的,可直接下拉到网页最后点击在library ...
icomoon字体图标显示
1.下载生成文件夹 2 2.更改文字在标签中显示. 注:更改名称只能两个字,这里我们使用第二种 ,这样引入有局限性,无法适应多个图标 3.将style.css文件中的代码复制到index.html中 ...

如何使用IcoMoon字体图标

如何使用IcoMoon字体图标

如何使用IcoMoon字体图标相关推荐

最新文章

热门文章