如何在桌面应用中使用Fontawesome

时间:2021-11-13 来源:未知网络 作者:996建站网

前言

在我从fontawesome里面查找图标的时候,突然发现现在它已经更新到5.x啦,图标库提供了很丰富的图标,和使用在web里面的方法。

是的,只有web的使用指南。但是我想在桌面应用上面使用。

那么要怎么办呢?

对于桌面应用来说,如果要用这个图标库,重点有两个:

  1. 有一个完整的图标库的字体文件。
  2. 需要知道图标在这个图标库的字体文件里面是什么。

图标库的字体文件很好下载,直接到fontawesome网站就能拿到,也就是最重要的事情就是第二步,了解图标库里面哪个字符代表哪个图标。

字体文件中,图标以UTF8的编码形式存储为一个个字符,那么现在要做的就很简单,那就是找出UTF8代码和图标的对应关系。

同样的,在web中使用字体图标的时候,也需要这种UTF-8代码,也就是说只要分析一下fontawesome提供的css就能得到图标的名称和对应的UTF8代码了。

包含CSS的是Web版本的FontAwesome,所以需要一个web版本的,那里面就有css了。

如何在桌面应用中使用Fontawesome插图

css文件夹里面有一个文件立刻就引起了我的注意:all.css,打开是这样的:

如何在桌面应用中使用Fontawesome插图

向下拉动css文件,就能找到这样的CSS定义:

如何在桌面应用中使用Fontawesome插图1

没错,这个content表示的就是图标对于的UTF8代码了,上面的css伪类名就能够当做图标名,这是因为在fontawesome里面进行搜索,就能得到一个这种的名称,他作为图标名方便在fontawesome网站进行图标搜索。

下一步要做的就是复制css里面所有含UTF8代码的定义,放到单独的css文件中,接下来就要用正则表达式把它制作成一个标准的json文件,也就是图标名作为key,图标的UTF8代码作为Value。

之所以需要这样做,是因为这个图标库包含4000+条css的图标定义,不这样就写到天荒地老吧。

如何在桌面应用中使用Fontawesome插图

在VSCode打开查找和替换,进行正则表达式的替换:

如何在桌面应用中使用Fontawesome插图

打开上图的开关,使用“.fa-([\S\s]+):before”替换为“$1:”。

这将会把fontawesome中css的形式由:

.fa-iconName:before {

}

变为:

iconName : {

}

如何在桌面应用中使用Fontawesome插图

这将会更接近JSON的格式,当然css会提示有很多语法错误,不用管它,因为最终需要的结果是JSON。

然后执行如下替换:

:[\S\s]\{ => 空白

如何在桌面应用中使用Fontawesome插图

(;[\s\S]+)\} => 空白

如何在桌面应用中使用Fontawesome插图

(content:)([\s\S]+) => :$2,

如何在桌面应用中使用Fontawesome插图

[\s]+ => 空白

如何在桌面应用中使用Fontawesome插图

[\n]+: => :

如何在桌面应用中使用Fontawesome插图2

([\S\s]+): => "$1":

如何在桌面应用中使用Fontawesome插图2

到此为止,需要正则表达式的地方已经结束了,关闭正则的开关,进行最后的处理:

如何在桌面应用中使用Fontawesome插图2

把:“ \f ”替换为:“\\uf”

“\e”替换为 “\\ue”

这是因为“\u”是一个关于Unicode的转义符,在Java应用中需要加上才能正常使用,其他语言是否需要,或者需要哪种处理方法这里就不清楚了。

接下来在文件的开头和结尾分别加上“{”和“}”。

如何在桌面应用中使用Fontawesome插图2

这个时候对它format一下,然后随便保存到哪里。

接下来需要使用NodeJs编写一个脚本,通过这个json文件生成java代码:

const Files = require("fs");

// 读取上面整理好的JSON文件。
let data = Files.readFileSync("font.json");
// 转换为String
let jsonContent = new String(data);
// 解析JSON
let values = JSON.parse(jsonContent);

let iconNames = Object.getOwnPropertyNames(values);

let result = "";

// 生成java代码,把图标名和图标的字符push到一个map里面。
for(let iconName of iconNames) {

    let template = 'awesomeMap.put("' + iconName + '\",\'' + values[iconName] + '\');';
    // awesomeMap是存放图标名和图标的字符的map,请跟据自己的代码修改。
    result = result + template + "\n";

}

Files.writeFileSync("font-awesome5-java.java",result);
console.log(result)

如何在桌面应用中使用Fontawesome插图3

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序