iconmoon字体图标的使用方式

news/2024/10/21 6:45:31/

在日常的前端开发中,我们会用到图标,但是如果想要方便的调节其颜色和大小又不方便,于是开始逐渐使用字体图标,保存格式为.svg格式,这样可以保持自己样式随着字体大小的改变时保证字体不失真。所以开始流行使用字体图标演示,下面是目前比较流行的两种方式:

第一种:iconmoon

这是使用的外国的网站,所以网速比较慢:
具体使用步骤:
(1)打开网址:https://icomoon.io/#home
(2)点击icomoonApp:在这里插入图片描述
(3)点击自己想要的图标:
在这里插入图片描述
(4)选择完毕后,点击右下角的,generate Font:会进入图标确认界面。点击download下载压缩包。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
(5)解压后,把看到的文件夹添加到对应的前端开发文件夹中:下面是参考样式。
在这里插入图片描述

(6)将解压后的style.css中的代码添加到自己项目中的css文件中,这表示引入了icomoon字体图标:如图所示是需要引入的代码。
在这里插入图片描述
(7)下面开始在html页面中使用字体图标:打开demo.html文件,在想要添加的图标右侧点击复制:然后粘贴到对应的html标签中,如:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这里记得要把font-family引入文件中,可以设置字体的颜色和大小等,和平常的字体使用是一样的。

第二种:使用iconfont方式

,阿里团队开发的,国内相对比较流行,具体的使用方式,在我的其他博文可以看到。
以上是平常开发中常用的样式文件,掌握这两种方式就算是掌握了字体图标的使用方式。接下来的日子要加油啊!!!!

补充:有时字体图标是需要我们自己单独定制的,这时我们可以给ui说一下,让他帮我们设计一个例如手机的svg格式的图标,当ui设计好之后,传给我们一个svg格式的图标后,在icomoon中点击上传图标之后,会自动帮我们转换为字体图标样式,这时我们就可以和以前一样正常使用啦!!!

补充2:当我们在开发过程中发现自己的还需要再追加新的图标后,但是也要保存以前的图标,可以通过一下方式添加:上传成功后,选择想要追加的图标然后下载,替换原来的文件即可。
在这里插入图片描述


http://www.ppmy.cn/news/306870.html

相关文章

25行代码爬取英雄联盟手游英雄皮肤图片

下面附源码 手游网址:英雄联盟手游官网 - 腾讯游戏 1、点击英雄 2、随机点一个英雄进去 3、按F12进入开发者模式,然后刷新 4、在搜索框里输入 js 找到skins.js点击 我们可以发现所有现有的英雄皮肤信息都在里面 皮肤的图片链接以及对应的皮肤名称在s…

linux玩 LOL

本次测试用LOL客户端为美服最新版客户端 其他客户端未经测试 有需求可以去winqh提建议 为也尽量测试看看 本次延时使用Ubuntu12.04最新版系统 我们只要按照一下步骤照做就好 Step 1: Install Wine1.4 and Winetricks *安装wine1.4和winetricks code: sudo add-apt-repository p…

发布十几套Qt精美皮肤(Qt使用QSS进行界面美化)

当你学会Qt,觉得Qt自带的白板太丑了,比如这样: 于是开始想 … … 我的程序是不是应该自己实现以下系统标题栏,免得Win7下面出现傻大笨粗的系统边框,又或者Win10下与自己的皮肤风格不一致,于是自己实现最…

Windows10下美化字体,达到类似mac的效果

目录 1. MacType官网2. MacType源码3. 安装4. 优化Chrome浏览器4.1 修改Chrome快捷方式4.2 安装插件4.3 修改Chrome的自定义字体 MacType是一个渲染Windows系统字体的工具。效果如图,会很明显的加深,看起来更加舒服: 1. MacType官网 https:/…

字体图标或文字的渐变效果

效果图: css: .bang .wrapper .scroller ul{line-height: 3.4rem;height: 100%;display: -webkit-flex;}.bang .wrapper .type{width: 5rem;display: inline-block;margin: 0 9px;overflow: hidden;color: #484E4B;font-size: 1.4rem;text-align: center…

svg转字体图标

icomoon图标的使用 早上听同事介绍icomoon的图标,自己上网查找用例,发现确实挺好用,只需在网址: https://icomoon.io/app/ 上选择相应图标点击font设置,然后点击下载。将下载文件解压,然后将font文件夹…

icomoon 制造字体图标

icomoon 制造字体图标 一 制作字体文件 今天为大家推荐一种非常好用在字体图标制作方法。使用icomoon制作自己需要的图标文件。 首先,打开icoMoon网站,选择自己所需要的图标,这里我我选中了10个图标文件。如下图。 当然你可以随意选择自己…

自制图标字体FontAwesome

注:担心网址失效,以下内容属于转载复制。原地址:http://blog.sina.com.cn/s/blog_abd22d920102yhig.html 先安利三个网站 1 https://www.iconfont.cn/​ 图标网站,素材的来源 2 https://icomoon.io/app/#/select​ 核心网站,制…