自制图标字体FontAwesome

注：担心网址失效,以下内容属于转载复制。原地址：http://blog.sina.com.cn/s/blog_abd22d920102yhig.html

先安利三个网站

1 https://www.iconfont.cn/ 图标网站，素材的来源

2 https://icomoon.io/app/#/select 核心网站，制造Font

3 https://transfonter.org/ 小程序处图标会用到，主要做base64的转换

之所以会想到做这个，源于自己最近再弄个小程序，但小程序大小限制，不可能引用Font Awesome这个库，最好的形式当然就是按需取，这样子就能满足项目的需求。

下面介绍具体的流程，先找素材，然后在icomoon打开，并操作

好的，按照上面的步骤，此时你的本地应该有个文件，解压后，里面会有个demo,按照上面的，就是自定义的font了，PC上的到此就能使用了。

----------------------------------------分割线--------------------------------------------

但是仅仅上面的步骤，小程序端却是不能使用的，下面就介绍小程序端的使用，很简单，就是把上面的文件，转成base64，然后来使用。

安利的第三个网站就是做这个用的。

我是参考这位作者来的：

https://www.jianshu.com/p/936e3f09e217

大家可以看他的用法，稍微变通一下就行了，具体的步骤我就不写了（懒癌犯了）

最后的代码贴一下，大家可自行理解分析

@font-face {

font-family: 'icomoon';

src: url(data:font/truetype;charset=utf-8;base64,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) format('truetype'),

url('icomoon.svg#icomoon') format('svg');

font-weight: normal;

font-style: normal;

}

.icon{

display:inline-block;

font-family: 'icomoon' !important;

speak:none;

font-style:normal;

font-variant:normal;

text-transform:none;

text-rendering:auto;

line-height:1;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

vertical-align:middle;

}

.icon-wx:before {

content: "\e900";

}

.icon-fire:before {

content: "\e901";

}

.icon-phone:before {

content: "\e902";

}

自制图标字体FontAwesome相关推荐

LVGL MCU_Font V2.0 更新定制图标字体
完整介绍地址:https://gitee.com/WuBinCPP/MCU_Font_Release 4.定制图标 (版本V2.0新增功能) 当字体图标 FontAwesome 中没有我们想要的图标时 ...
学习WPF——使用Font-Awesome图标字体
学习WPF--使用Font-Awesome图标字体原文:学习WPF--使用Font-Awesome图标字体图标字体介绍在介绍图标字体之前,不得不介绍图标格式ICON ICON是一种图标格式,我们 ...
字体图标在服务器上显示不出来,fontawesome图标字体库组件在服务器上显示不出来图标的解决...
这个组件在我所开发的网站中被大量使用,为网站增色不少.在本地测试的时候所有图标都能显示出来,可一到服务器上就显示不出来了.网上查列出了可能的原因.其一,IIS没有注册字体类型.经过检查,不存在这个问题 ...
[c#] 使用Font-Awesome图标字体库
使用Font-Awesome图标字体 .net4.5及以上框架版本可以直接去使用MaterialDesign库中的图标icon,种类也很多.如果不满足版本要求可以使用Font-Awesome图标字体, ...
[Xamarin.forms] FontAwesome图标字体库用法
FontAwesome图标字体库在Xamarin.forms用法下载字体文件使用步骤下载字体文件官网: http://www.fontawesome.com (现在免费版的更新到5.12.1版 ...
使用Font-Awesome图标字体库
方法一,在vue +Element 的项目中直接安装.使用Font-Awesome图标字体库: 1. 安装font-awesome: 2.在main.js中引入: import 'font-aweso ...
FontAwesome图标字体库和CSS框架
1.CSS框架简介 Font Awesome是一套绝佳的图标字体库和CSS框架,为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. ...
fontawesome图标字体库
fontawesome图标字体库通过css类可以让你使用众多的图表,堪称一个图标字体的css框架了.Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包 ...
Qt使用FontAwesome图标字体库
官网: http://fontawesome.io/ 中文网: http://www.fontawesome.com.cn/ GitHub: https://github.com/FortAwesom ...

自制图标字体FontAwesome

自制图标字体FontAwesome相关推荐

最新文章

热门文章