情况说明

为了在小程序里调用 iconfont，我习惯这么用。

@font-face {
    font-family: "iconfont";
    src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAA.....AAAA=') format('woff2'),
}

.iconfont {
    font-family: "iconfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.iconfont:before {
    margin: 0 .25em 0 0;
}

.iconfont.tags:before {
    content: "\e880";
}

问题

现在用到的一些 icon 没有现成的 iconfont （一些国内外社交平台的图标 /最好是单色），虽然零星也有一些但不统一，所以需要自己做图。
导出 png 的话，小程序需要用 bg-img 这种骚操作，要改色的话还要用到 mask，有点绕，每次都要翻自己以前的代码。
导出 svg 的话，请问怎么搞成这种 woff 的字体格式呢？而且 content 调用时的名称是怎么来的？

第 1 条附言 · 2020-06-13 02:37:56 +08:00

写了个iconmask的snippet，省得每次找了，可以配合透明的png使用，有需要的自取。
background-color控制图标颜色。
定义图标也可以考虑用雪碧图+坐标，或者直接base64。
less语法。把默认圆形图标@circle放进去就是标准css。注释可能也不大一样。

    .iconmask{
        // 垂直居中
        display: inline-flex;
        align-items: center;
    }

    @circle: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI1MCIvPjwvc3ZnPg==");

    .iconmask::before {
        content: '1';
        color: transparent;
        // Content可以使block中的内容和其它文字baseline对齐。
        // 没有conent的话，是block底部与其它文字baseline对齐。
        // 和上面的flex垂直居中可以择一使用。

        display: inline-block;
        width: 3em;
        height: 3em;
        // if no height, the default height is line-height.

        margin-right: .25em;
        -webkit-mask: @circle no-repeat center /contain;
        background: #888;
    }

    .iconmask.instagram::before {
        -webkit-mask-image: url('assets/instagram.png')
    }

iconfont

content

导出

before

3 条回复 • 2020-06-13 08:43:32 +08:00