您的位置:首页 > 移动开发

在unti-app中使用阿里的iconfont图标

2019-03-31 21:44 225 查看
版权声明:原创不易 https://blog.csdn.net/qq_41692307/article/details/88936320

uni-app 是近年比较火的一个 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。

在这可以看出这套框架有多牛逼了,但是呢随之的小问题也非常多,本人也是不久才开始使用这个框架,在使用阿里的iconfont的导入时所遇到的问题。

uni-app 不支持本地文件(icon/背景图…等等)引入

解决方案

  1. 关于图片可以采用网络地址的请求引入和base64的方式
  2. 关于icon,可以使用unicode的方式引入,以下
<text class="icon-submit">&#xe645;</text>
<style>
@font-face {
font-family: 'iconfont';
/*unicode  只需要.ttf的即可  */
src: url('https://at.alicdn.com/t/font_1031464_ubfx7xnjwog.ttf') format('truetype');
}

.icon-submit {
/* 这是一个icon的样式	 */
font-family: 'iconfont';
font-size: 56px;
}
</style>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: