Ray
admin@raychinki.studio
Raychinki Studio
IcoMoon图标使用Base64植入CSS
IcoMoon图标使用Base64植入CSS

在修改主题模板的时候,有个别图标需要调整。找了了一下没发现这些图标的所使用的字体,最后发现字体居然一串Base64字符串。

于是就研究了一下,没想到CSS里面还可以通过Base64直接嵌入字体。之前就了解了不少免费的图标库,因为主体模板里使用的是IcoMoon,这里就以此为例:

  • 首先将主题模板中的字体提取出来:
    IcoMoon Font
    keyboard_arrow_down

    @font-face {
    font-family: 'icomoon';
    src: url(data:application/x-font-ttf;charset=utf-8;base64,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IyYnIicmIyYjJiMmIyYnIiMmJyIjJiciIyYnJiMmIyYjJiMmIyYjJiMmJyIjJyIjJiciJyYjJiMmIyYjJiMmIyYnIiMmJyIjJiciJyYjJiMmIycxJyYjJiciMSciIyYnIzEvATEvATEvASIxJyMxJyMxLwExLwExJzQjLwEjMSciMSY1IjUmIzQjLwExJyIxJzUxJzQxJiM0MSYjNDEnMSciMSY1IjUnNDEmIzQxJiM0MSY1IjE0JzkBJyIxJjU0MSYjNDEnNDEnMSc5ASciMTQvATQxJyYxNCM0MSY1OQEnOQEnIj0BJjE0IzUxJzUxJzkBJzkBLwE0MSc0MSc1MSc5ASc1IjE1MTUnNDEnNTEnNSIxNTkBJzUxJzU0MSc1IjE1MSc1NDEnNTEnNSI9ATQxJzU5ASc1NDEnNTQxJj0BOQE3NTkBNzU2MTU5ATc1MTc1MjE1Mj0BNjE1MTc1OQE3NTE3NTQxNzUxNzUyMTU5ATc0MTc1MTc1MTc1MjE1MjE1NjE1NjE1NjE1NjE1MjE1MjE0NzUxNzQxNzQxNzQxNjUyMTQ3OQE/ATQxNzQxNjUyMTQ3OQE3MjE0NzQxNzYxNDM0MTcxPwExPwE2MTQzNDE2MzQxNzE3MjU/ATE3NDE2MzQxNzMxNzI1ATwMCwwMAwwMDAsFBAUFBAMEAwMDAwMDAwMCAwICAwICAgMCAgICAgECAgICAgECAgIBAgECAgEBAgIBAQICAQECAQIBAQIBAQIBAQECAQEBAwEBAQEBAQIBAQEBAQEBAQEDAgEBAQEBAQEBAQEBAQEBAQEBAQEDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgEBAQEBAwEBAQEBAQEBAQEBAgMBAQIFAQEBAQEBAQEBAwEBAQICAQEBAgEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQUEBQUEAwQEBAQFBAcHBwcEBAQEAwMDAwMCAwIDAgIDAgICAgICAgECAgIBAgECAgECAgEBAQICAQECAQYBAQEBAwICAQIBAQEBAQEBAQIBAQEBAQEBAQIBAQEBAQEBAQEBAQEBAQEBAQEBAQEEAgYBAgEBAQEBAwIDAgEBAQICAgEBAQEBAQEBAQEBAQEBAgIBAQECAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEFBAkICAMDBAQIBwcHBQQEBQMDBAQDAwQDAwMDBAMDAwMDAwMDfQEBAgECAQEBAgEBAQECAQEBAgECAQEBAgEBAQEBAgEBAQEBAQEBAQEBAQEBAQEBAQIDAgIBAQEBAQEBAQEBAQEBAQEBAwEBAQEBAQIDAQEBAgEBAQEBAgEBAwICAQEBAQEBAQEBAQEBAgICAQEBAgEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQIBAQEBAQEBAQEBAQEBAgIBAQEBAQICAgICAgEBBQIBAQMCAwIJAgYBBQEBAQEBAQEBAQEDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAQEBAQECAQEBAQIBAQMBAQIBAQECAQIBAgECAQIBAgECAQIBAgICAQICAgICAgECAgIDAgICAwICAwIDAwIDAwMDBAMEAwUEBQUBKw0LDAsMDRQMDQwNFMUOCwsLCw4UDAwMDBT9zBQRERERFBQMDQwNFPsUDAwMDBQUERERERQLAQIBAQUBAgEBAQIBAgEBAQEBAQEBAQEBAQEBAQEBAQECAQEBAQEBAQEBAQEBAgEBAQEBAQEBAQEBAQEBAwEBAQEBAQIBAQEBAgEBAQIBAQIBAQECAgEBAgIBAQICAgECAgECAgICAgICAgIDAgIDAwIDAwMDBAQEBAoKCgsBCgkKCgQDBAQDAwMDAgIDAwICAgMCAQICAgICAgECAgECAQICAQECAQIBAgEBAQIBAgEBAQIBAQEBAQIBAQEBAQEBAQEDAgEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgEBAQEBAQEBAQEBAQEBAQEBAQEBAQEDAgEBAQIBAQECAQEBAQECAQEBAQEBAQEBAQUBAQEBAQEBAQECAQIBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQIBAgEBAQEBBAEEAQEBAQEBBgIBAQMBAQcCAQEBAQECAQEBAwIBAQECAwEBAQMCAQICAQECAQECAQEBAgEBAgICAQEDBFsBAwICAgICAwICAgMCAgIDAgMCAwMDAgMDBAMEAwYFBgUcBwYHBwQEBAQDAwMDAgIDAwICAgMCAgICAQICAgIBAgIBAQICAQECAgEBAgECAQMBAQIBAQEBAgEBAQEBAQIBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgEBAQEBAgEBAQEBAgECAQIDAQIBAgEBAQIBAgEBAwEBAQEBAQEBAQMBAQQCAQEBAQIBAQEBAQEBAQEBAQEBAQEBAQECAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAwEBAQEBAQEBAQIBAgECAQEBAQQBAQEBAgEBBAEBAQNIAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAQEBAQEBAQEBAQECAQEBAQEBAQEBAQEBAwEBAQEBAQEBAQEBAQEBAQEBAQIBAQEBAQMBAQEBAQEBAQEBAQEBAwICAQUCAQEBAgEBAQIDAgECAgECAgECAQEBAQEBAQEBAQEBAQEBAQEBAgECAQEBAQECAQEBAQEBAQECAQEBAQEBAgECAgECAgEBAQIBAQEBAQMBAQEBAQMCAQICAQMBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEDAQEBAgEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQQBBgIBAQEBAQMBAQMBAQECAQEBAgECAQEBAgEBAQIBAQECAQEBAgECAgEBAQIBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQIBAgEBAQICAQEBAgEBAQIBAQEBAQEBAQEBAQIDAQEBAQECAwEBAQEBAgECAQICAQICAQEBAgEBAQUBAQYCCQEkAggBAgUCBAEFAQQBAwICAQICAQICAwEBAQEBAQEBAQEBAQEBAQEBAQEBAT4BAwMFAgUDAgMCBQMFAwIFAwUCBgIDBQIDAggDAgMCAwEBAQEBAQEBAQEBAQEBAQEBAwECAQEBAQEBAQEBAQEBAwEBAQEBAQEDAQEBAgEBAQEBAQIBAQMBAQECAQEBAgECAQEBAgEBAQIBAQECAgECAQEBAQEBAgIBAgIBAgIBAQECAQEBAQEBAQEBAQEBAQECAQEBAgEBAQIBAQECAQEDAQEBAgECAgMBAQEBAQEBAwIDAQEDAQICAQIDAgcBCgIhAQIKAQYBBQIEAQQBAwIDAQEBAgMCAQICAQICAQEBAgECAQEBAgECAgECAQEBAQECAQEBAgEBAQIBAQEBAgIBAgEBAQEBAQEBAQEBAQEBAQEBAQIBAgIBAgEBAQIBAQECAQEBAgEBAQEBBQECAgMBAQMBAQkBBgUBAQEBAQEBAwEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH+ZwsLDQ4LCwsLDg0LCwsLDQ4LCwsLDg0LCwEEDA0UFAwNDA0UFAwNWgwNFBQMDQwNFBQMDW8BAQEBBQICAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAQEBAQEBAQEBAQEBAQIBAQEBAQEBAQEBAQIBAQMBAQEBAQEBAQICAQEBAQEBAQIBAQEBAQEFAgEBAQEBAQEBAQICAgIBAQEBAQEBAQEBAQIBAQIBAQEBAQEBAgEBAQEBAQEBAQEBAgIBAQEBAQEBAgICAgEBAQECAQICAgIBAQEBAwICAgIBBAQCBAEGAgYBAQEhAQcCBQEFBAEBAgEBAwICAgEBAQEBAgICAgEBAQEDAgICAQEBAQEBAQEBAgICAQEBAQEBAQICAQEBAQEBAQEBAgEBAgEBAQICAgIBAQEBAQQCBAEBAQEBAQEGAQEBAQMCBwEBAQECAgEBAwEBAQEBAwIDAQEBBQIEAgIDAgQCAgMCBAICAgMCAgQCAwQEAgUCBAIDAgEBAjMBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgEBAgEBAQEDAgICAQEBAQEBAwIBAQEBAQEDAgQBAQEBAQEBAgIBAQEBAQEBAQEBAQEBAgEBAQEBAQECAgIBAQIBAQEBAQEBAgIBAQEBAQEBAgICAgEBAQEBAgICAgEBAQEBAQMCAgEBAgEBAwICAgEBAwIEAQMBAQUC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) format('truetype');
    font-weight: normal;
    font-style: normal;
    }

  • 提取其中的base64字符串,将其复制到https://www.motobit.com/util/base64-decoder-encoder.asp中,选择decode及export,导出字体源文件base64.bin。
  • 由CSS中字体的“x-font-ttf”属性可知,这是个ttf字体文件,可直接将base64.bin的扩展名改为base64.ttf,得到该字体文件,这时候就可以使用IcoMoon来编辑图标了。
    进入IcoMoon App:https://icomoon.io/app/,点击Import Icons上传base64.ttf,可以看到字体所带的矢量图标,可进行编辑、移动和删除操作,同时也可以加入IcoMoon图标库中免费的490个图标。
  • 选中自己需要的图标后,点击Generate Font,可生成矢量图标文件,包含woff、ttf、svg、eot及相对应的css和demo。
    但生成的文件是不包含base64的,这时候就需要用到https://www.css-js.com/tools/base64.html,将图标、字体文件转换为Base64字符串。
  • 最后将新的Base64替换主体模板原有的Base64就大功告成了!

Raychinki Studio

IcoMoon图标使用Base64植入CSS
在修改主题模板的时候,有个别图标需要调整。找了了一下没发现这些图标的所使用的字体,最后发现字体居然一串Base64字符串。 于是就研究了一下,没想到CSS里面还可以通过Base64直接嵌…
扫描二维码继续阅读
2019-01-09