三分钟教会你自制 iconFont 字体图标库

app开发的时候，我们大多会用到字体icon，下面我们就讲解一下，如何自定义生成 iconFont

一般情况，我们优先选择在 Iconfont-阿里巴巴矢量图标库下载我们需要的矢量icon的svg格式, 如果这里没有你需要的icon，也可以自己切图把png格式的图片转化为svg;

svg 导入并生成 font

在线转换网址

导入多个svg图片

点击右下角

记好每个icon的code

然后点击 download

如图：

然后我们写 less（或者css），定义这些icon的样式：

@assets: '../assets/fonts';
@version: '?v=1.1.0';@font-face {font-family: 'icomoon';/* 自行安装第三方字体图标库 */src: url('@{assets}/icomoon.eot@{version}');src: url('@{assets}/icomoon.woff@{version}') format('woff'),url('@{assets}/icomoon.ttf@{version}') format('truetype'),url('@{assets}/icomoon.svg@{version}') format('svg');font-weight: normal;font-style: normal;
}/* 根据第三方字体图标库编写 */
/* 举例：fa 就是 prefixClass 的值，下面的的图标 css class 命名都要用 fa- 开头  */
.fa {display: inline-block;/* 以下的 font 与上面 @font-face 的 font-family 要一致*/font: normal normal normal 14px/1 icomoon;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.fa-home:before {content: "\e900";
}.fa-doc:before {content: "\e903";
}.fa-knowledge:before {content: "\e906";
}.fa-discuss:before {content: "\e901";
}.fa-question:before {content: "\e902";
}

然后就可以把这个less引入到我们的入口文件里面；

调用举例：

<span className="fa fa-home"></span>
/**更改大小和颜色**/<span className="fa fa-home" style="font-size:30;color: blue"></span>

实际效果：

三分钟教会你自制 iconFont 字体图标库相关推荐

【Vue-Element】矢量字体库iconfont字体图标库使用
矢量字体库iconfont字体图标库使用 1.注册并登录 2.图标管理 >> 我的项目 >> 新建项目 3.新建完成后,搜索我们想要的图标,然后添加到购物车 4.添加完成后,购 ...
超全超靠谱的 iconfont 字体图标库维护与使用
字体图标库的使用这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅- 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里矢量 ...
angular7项目中使用Iconfont字体图标库
iconfont官网 https://www.iconfont.cn 选择字体图标首先进入iconfont官网,然后使用github账号登录,搜索自己需要的图标,添加至购物车,然后添加之我的项目,点 ...
iconfont字体图标库的使用
阿里巴巴矢量图库网址:https://www.iconfont.cn/ 进入官网后选择自己想要的图标,鼠标放上去后点击购物车图标加入购物车: 然后点击右上角的购物车下载(下载是要登录的哦~) 下载素材 ...
vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
iconfont字体图标的使用方法
今天来谈谈iconfont字体图标的使用方法一.打开阿里巴巴矢量图官网阿里巴巴矢量图官网界面如下: 二.选择登录:可以使用GitHub账号登录,用其他账号也可以这里我选择用GitHub账号登录 ...
iconfont 字体图标
目前国内使用最多的是iconfont-阿里巴巴字体矢量图标库, 字体图标主要显示网页中通用常用的一些小图标iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标 ...
微信小程序离线引入 iconfont 字体图标
由于微信小程序的限制问题,我们不会像 Web 项目那样引入阿里的字体图标库,通常采用在线生成链接的方式引入. 但阿里矢量图库在 2022年 6-7月份进行了网站维护,维护之后,不能"生成在 ...
如何在vue项目中系统的使用iconfont字体图标
如何在vue项目中系统的使用iconfont字体图标前言 iconfont的特色官网注册在项目中使用的方式前言今天聊一下前端iconfont的使用方式,前端的图标经过这些年的发展,变得更系统 ...

三分钟教会你自制 iconFont 字体图标库

svg 导入并生成 font

三分钟教会你自制 iconFont 字体图标库相关推荐

最新文章

热门文章