convert font to base64 online All In One

convert font to base64 online All In One

https://www.base64encode.org/enc/font/

https://www.giftofspeed.com/base64-encoder/

uni-app icon 解决方案

1. 使用图片

2. 把 fonts 转换成 base64 字符串

// base64 字符串，字体 

@font-face {
  font-family: "iconfont";
  src:
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAM8AAsAAAAAB1gAAALvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqCEIFsATYCJAMQCwoABCAFhG0HSxthBhEVlKdkPwvsmHgLNqmwEc2pDxvYjI1gkX0f4uFrv9dz3+772RAqQJV8FbKANj5RiB1f1q0ioyorK1THs2Qj0gAJVYn///3mxT27TKyJJ63gD/KkYhr/9woe4ghtLxKJk5AWd7icc+CiJuQLU5SVQ48+ST+l0H2/pM2sm89zOb2VZYHMb1luYy3a0496AWYLKLA9sQ0UaAEFxC2yi7gTF3GaQJtRTbFxcfcIRYYmBeKyjDJQCiFZNrJFaDSszOI11Ep1IQZeRd+P/zAXcip1gmbuHJ/nYeWX9redqtuqPU6AYj4vjHUkNJGJ08bUviQMXtL2m2wJRVHxS/sz/N1+2CZOdizDemP/eBXRgCo7wIKcTvzSUnlmGMoSgt/tChX8EEOBlNvCLsQdpgv8HuNG8wuia9YA1Tfni5TZR1QthTxh8ZM2VCAHtiBtzfWtz1RtObA8IXowr5rzRK4/sRYpfjm1FBA9nrPl/qNAJRZLKJNsUumMKdb3dkIlkqjEtt8VrbNjZgnB48fG1XqNHax98/uI4xs768DFXVceFql2do6594N/t9vl/tw+ZlhKP6ngFjorHQq/AOmpcAlI98L7Pz/KG7P0OqU7+SuqQ7d8OXhYRvZsnLHcTCD4zwpgXfZVyJGzq6byIJiNgyZUaNOGv5ujz885jIPgWkIxOCLYYiRDUkyTmdNErd0CGopltJm1vb5dv3tJ5DDjpYTQ4wMqXT4h6fGZzJwfqA2R/SGlDxGUnsO0o4onyuKUUDLWoDbodPCGuFjE1U9sJispr4r4X6Sxi0IRiZWzD/RIc8wZ56ZkNmAoOLhL56G1ASKFHjWnLXOssmix6UWpDm4nnCJIYqgGlA3oaIFneHMmKp9/Qo2JJVEHqyf9hcio6x0UUjmAfOg9iHUvl4xmjRJjBjBI4IC7NAxZVgBi87Ae0liqHZGIKhluZKD6dH2j+8Jd0AY9MUcVKXLU5I9a6XU7FUcUppMkCss5MAeXmM7a3Q4A') format('woff2'),
  url('data:application/x-font-woff;charset=utf-8;base64,d09GMgABAAAAAAM8AAsAAAAAB1gAAALvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqCEIFsATYCJAMQCwoABCAFhG0HSxthBhEVlKdkPwvsmHgLNqmwEc2pDxvYjI1gkX0f4uFrv9dz3+772RAqQJV8FbKANj5RiB1f1q0ioyorK1THs2Qj0gAJVYn///3mxT27TKyJJ63gD/KkYhr/9woe4ghtLxKJk5AWd7icc+CiJuQLU5SVQ48+ST+l0H2/pM2sm89zOb2VZYHMb1luYy3a0496AWYLKLA9sQ0UaAEFxC2yi7gTF3GaQJtRTbFxcfcIRYYmBeKyjDJQCiFZNrJFaDSszOI11Ep1IQZeRd+P/zAXcip1gmbuHJ/nYeWX9redqtuqPU6AYj4vjHUkNJGJ08bUviQMXtL2m2wJRVHxS/sz/N1+2CZOdizDemP/eBXRgCo7wIKcTvzSUnlmGMoSgt/tChX8EEOBlNvCLsQdpgv8HuNG8wuia9YA1Tfni5TZR1QthTxh8ZM2VCAHtiBtzfWtz1RtObA8IXowr5rzRK4/sRYpfjm1FBA9nrPl/qNAJRZLKJNsUumMKdb3dkIlkqjEtt8VrbNjZgnB48fG1XqNHax98/uI4xs768DFXVceFql2do6594N/t9vl/tw+ZlhKP6ngFjorHQq/AOmpcAlI98L7Pz/KG7P0OqU7+SuqQ7d8OXhYRvZsnLHcTCD4zwpgXfZVyJGzq6byIJiNgyZUaNOGv5ujz885jIPgWkIxOCLYYiRDUkyTmdNErd0CGopltJm1vb5dv3tJ5DDjpYTQ4wMqXT4h6fGZzJwfqA2R/SGlDxGUnsO0o4onyuKUUDLWoDbodPCGuFjE1U9sJispr4r4X6Sxi0IRiZWzD/RIc8wZ56ZkNmAoOLhL56G1ASKFHjWnLXOssmix6UWpDm4nnCJIYqgGlA3oaIFneHMmKp9/Qo2JJVEHqyf9hcio6x0UUjmAfOg9iHUvl4xmjRJjBjBI4IC7NAxZVgBi87Ae0liqHZGIKhluZKD6dH2j+8Jd0AY9MUcVKXLU5I9a6XU7FUcUppMkCss5MAeXmM7a3Q4A') format('woff')
}

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

.iconshanchu1:before {
  content: "\e68c";
}

.icongou:before {
  content: "\e786";
}

.iconarrowBottom-fill:before {
  content: "\e60e";
}

uni-app icon 解决方案

1. 使用图片

2. 把图片转换成 base64 字符串，utils 导入使用

https://base64.guru/converter/encode/image

// base64icons.js
// utils
export const iconUp = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAPCAYAAADZCo4zAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACKADAAQAAAABAAAADwAAAAAnpKdCAAAAhklEQVQYGWNggIL/Dg4sp/TZ14AwiA0TB9P/GxqYTumzrTipz/YfhEFskBhIkvH///+Mpw3Z5/7/z5CIrIuRkWG+6fmfyYynDNj7gYoKkCXhbEbGfqBd/wWBqo9BBdWh9E0I/V8IrhjEOGXAtvKkAftqZEGwQ5AF0NkjRAFarDHdA8YOitcB4/0rbQdf06wAAAAASUVORK5CYII=`;


export const iconDown = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAPCAYAAADZCo4zAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACKADAAQAAAABAAAADwAAAAAnpKdCAAAAlUlEQVQYGWNgQALBpzjaQ06ydyIJMbAgcxgZ/ikxMDAyIYuhcJAlYOwRooAx5BTbAqCfVUH+/s/AoA6iGRkYboJoILjNwvCf8d1/hv9WED6EBCoE8xkZGE8y/v//nzH0NPvc//8ZEpEVMTIyzF9t+jOZiZGR8b+OaVUK0NyVcAVANkgMJAcXa/jvwBJ8in0NCIPYMAkABoMmghwzxkcAAAAASUVORK5CYII=`;

<template>
    <view class="dap-icon-box">
      <!-- iconfonts 不好使 💩， svg 和 ::before 都不支持， iconfont 应该用不了-->
       <text
            class="dap-icon"
            :class="test"
            :style="{
                'color': color,
                'font-size': fontSize,
                'background': background,
            }">
            {{name}}
        </text>
        img
        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAPCAYAAADZCo4zAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACKADAAQAAAABAAAADwAAAAAnpKdCAAAAhklEQVQYGWNggIL/Dg4sp/TZ14AwiA0TB9P/GxqYTumzrTipz/YfhEFskBhIkvH///+Mpw3Z5/7/z5CIrIuRkWG+6fmfyYynDNj7gYoKkCXhbEbGfqBd/wWBqo9BBdWh9E0I/V8IrhjEOGXAtvKkAftqZEGwQ5AF0NkjRAFarDHdA8YOitcB4/0rbQdf06wAAAAASUVORK5CYII=" alt="" srcset="">
        image
        <image src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAPCAYAAADZCo4zAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAACKADAAQAAAABAAAADwAAAAAnpKdCAAAAhklEQVQYGWNggIL/Dg4sp/TZ14AwiA0TB9P/GxqYTumzrTipz/YfhEFskBhIkvH///+Mpw3Z5/7/z5CIrIuRkWG+6fmfyYynDNj7gYoKkCXhbEbGfqBd/wWBqo9BBdWh9E0I/V8IrhjEOGXAtvKkAftqZEGwQ5AF0NkjRAFarDHdA8YOitcB4/0rbQdf06wAAAAASUVORK5CYII=" alt="" srcset="">
    </view>
</template>

refs

https://www.cnblogs.com/xgqfrms/p/15069781.html

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---