0%

uni-app 如何引入Iconfont阿里巴巴矢量图标库

步骤如下:

  1. 下载图标项目, 解压后效果如下
  2. 修改iconfont.css文件

    修改前格式:

    1
    2
    3
    4
    5
    6
    7
    8
    @font-face {font-family: "iconfont";
    src: url('iconfont.eot?t=1605254910083'); /* IE9 */
    src: url('iconfont.eot?t=1605254910083#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,转换的base64内容') format('woff2'),
    url('iconfont.woff?t=1605254910083') format('woff'),
    url('iconfont.ttf?t=1605254910083') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('iconfont.svg?t=1605254910083#iconfont') format('svg'); /* iOS 4.1- */
    }

    修改后格式:

    1
    2
    3
    4
    @font-face {
    font-family: "iconfont";
    src: url('data:application/x-font-woff2;charset=utf-8;base64,转换的base64内容') format('woff2');
    }
  3. Copy字体文件iconfont.ttf和样式文件iconfont.css 至UniApp项目static/font目录中

以上: 如发现有问题,欢迎留言指出,我及时更正

如何文章对你有益,请给我买杯豆浆喝