Skip to content

Latest commit

 

History

History
128 lines (104 loc) · 4.18 KB

fontawesome.md

File metadata and controls

128 lines (104 loc) · 4.18 KB

FontAwesome 资源利用

FontAwesome 上也有众多 IconFont 资源,我们可以通过如下步骤将我们需要的素材批量获取。

1. 查找免费图标

打开 Free 分类页面,可以列举出当前 FontAwesome 所有的免费图标。

2. 获取字体文件

打开 Download 页面,点击 “Font Awesome Free for the Web” 按钮,即可获取字体资源压缩包,解压后我们拿到 webfonts 目录下的三个字体文件 fa-brands-400.ttffa-regular-400.ttffa-solid-900.ttf 即可。

3. 获取字体名

同时这里我们需要用工具查看这三个 .ttf 文件对应的字体名称,这里我使用的是 BirdFont,详情可参考 iOS 在 App 中使用自定义字体

三个字体文件对应的字体名如下:

fa-brands-400.ttf: Font Awesome 5 Brands
fa-regular-400.ttf: Font Awesome 5 Brands
fa-solid-900.ttf: Font Awesome 5 Brands

4. Swift 代码生成

用 Chrome 打开 metadata 目录下的 icons.json 文件,打开 Chrome 开发者工具的 Console,在其中执行如下 JavaScript 脚本,即可获取三个 .ttf 文件对应的枚举结构,如下所示:

fa-brands-400.ttf

function camelCase(text, separator) {
    var arr = text.split(separator);
    for(var i = 1; i < arr.length; i++) {
        var s = arr[i].slice(0, 1).toUpperCase(); 
        var h = arr[i].slice(1);
        arr[i] = s + h;
    }
    return arr.join('')
}

var json = document.getElementsByTagName('pre')[0].innerText;
var objs = JSON.parse(json);
var result = ""
for (var key in objs) {
    if (objs.hasOwnProperty(key)) {
        let item = objs[key]
        if (item.styles.includes("brands", 0)) {
            var name = key
            name = camelCase(name, ' ')
            name = camelCase(name, '-')
            var code = item.unicode
            result = result + "case " + name + " = " + "\"\\u{" + code + "}\"" + "\n"
        }
    }
}
console.log(result)

fa-regular-400.ttf

function camelCase(text, separator) {
    var arr = text.split(separator);
    for(var i = 1; i < arr.length; i++) {
        var s = arr[i].slice(0, 1).toUpperCase(); 
        var h = arr[i].slice(1);
        arr[i] = s + h;
    }
    return arr.join('')
}

var json = document.getElementsByTagName('pre')[0].innerText;
var objs = JSON.parse(json);
var result = ""
for (var key in objs) {
    if (objs.hasOwnProperty(key)) {
        let item = objs[key]
        if (item.styles.includes("regular", 0)) {
            var name = key
            name = camelCase(name, ' ')
            name = camelCase(name, '-')
            var code = item.unicode
            result = result + "case " + name + " = " + "\"\\u{" + code + "}\"" + "\n"
        }
    }
}
console.log(result)

fa-solid-900.ttf

function camelCase(text, separator) {
    var arr = text.split(separator);
    for(var i = 1; i < arr.length; i++) {
        var s = arr[i].slice(0, 1).toUpperCase(); 
        var h = arr[i].slice(1);
        arr[i] = s + h;
    }
    return arr.join('')
}

var json = document.getElementsByTagName('pre')[0].innerText;
var objs = JSON.parse(json);
var result = ""
for (var key in objs) {
    if (objs.hasOwnProperty(key)) {
        let item = objs[key]
        if (item.styles.includes("solid", 0)) {
            var name = key
            name = camelCase(name, ' ')
            name = camelCase(name, '-')
            var code = item.unicode
            result = result + "case " + name + " = " + "\"\\u{" + code + "}\"" + "\n"
        }
    }
}
console.log(result)

5. 最后

本教程思路仅供学习交流,FontAwesome 上并非所有字体都能够免费商业使用,大家在使用的同时务必注意版权问题,未标明免费商业使用的还请联系对应创作者,否则由此引发的后果将由您自己承担。