Skip to content
This repository has been archived by the owner on Jun 3, 2021. It is now read-only.

能否支持使用iconfont图标 #39

Closed
hizhengfu opened this issue Oct 27, 2017 · 10 comments
Closed

能否支持使用iconfont图标 #39

hizhengfu opened this issue Oct 27, 2017 · 10 comments

Comments

@hizhengfu
Copy link

目前此项目中都是使用的图片作为图标。http://www.iconfont.cn/ 中有大量的资源可以使用,图标是否可以直接使用字体图标。现在项目使用都是自行来替换,估计很多人都有类似需求。

@play175
Copy link

play175 commented Oct 28, 2017

这是我的使用方法,仅供参考:

定义css

* {
  font-family: "iconfont" !important;
}

加载字体

beforeCreate() {
    var domModule = weex.requireModule('dom');
    //目前支持ttf、woff文件,不支持svg、eot类型,moreItem at http://www.iconfont.cn/
    domModule.addRule('fontFace', {
      'fontFamily': "iconfont",
      'src': "url('//at.alicdn.com/t/font_153151_5zv8k123shziwwmi.ttf')"
    });
  }

然后就可以愉快的使用了:

<text>&#xe715;用户中心</text>

@hizhengfu
Copy link
Author

@play175 我们这也采用类似方案,封装了一个组件来处理图标的问题。目前类似wxc-tab-page组件中的图标是图片,如果使用图标需要自行修改才可以。如果在组件中可以直接支持字体图标,用起来会更方便。

@jl360cn
Copy link

jl360cn commented Nov 2, 2017

问一下,把字体放在android的assets里可以吗?试验了两天,没出来。之间,只要把链接改为网络,就没问题。
domModule.addRule 支不支持从本地读取字体?

@tw93
Copy link
Member

tw93 commented Nov 2, 2017

@jlsky 本地可能是路径问题 获取不到的 建议放到cdn 或者直接使用http://iconfont.cn/

@jl360cn
Copy link

jl360cn commented Nov 2, 2017

真是奇怪了。刚把问题发上来,就发现,字体显示了。
我把字体放在了app的assets目录下。
mydom.addRule('fontFace', {
'fontFamily': "iconfont3",
'src': "url('file://asstes/iconfont2.ttf')"
});
另外说明,用weex playground源码里的android代码,在加载本地js代码时,bundelUrl指向的是 http://your_ip:12580/examples/build/ 而不是js代码所在的assets目录。

@jl360cn
Copy link

jl360cn commented Nov 2, 2017

重新说明一下,字体在本地还是不成功。此前说的,出来的原因是:我在子组件里引用了网上的字体,主界面上显示了所用的字体,误导了。

@tw93
Copy link
Member

tw93 commented Nov 2, 2017

weex iconfont 字体可能第一次出不来 ,可以参考这个优化 https://segmentfault.com/q/1010000009357817

@phoenixsky
Copy link

phoenixsky commented Nov 3, 2017

@jlsky
Weex如何在native中加载本地的字体文件,如iconfont - 个人文章 - SegmentFault

@tw93
Copy link
Member

tw93 commented Nov 17, 2017

@hizhengfu 我对wxc-tab-page 进行了一次升级,新增自定义nav栏头部 这样就可以使用iconfont了
同时还有一些其他的升级,可以看一下wxc-tab-page的文档哦

@tw93 tw93 closed this as completed Nov 17, 2017
@tw93
Copy link
Member

tw93 commented Dec 18, 2017

可以更新weex-ui到最新,目前wxc-tab-bar、wxc-tab-page 已经支持配置iconfont

npm i weex-ui@latest -S

详细设置可见
https://alibaba.github.io/weex-ui/#/cn/packages/wxc-tab-bar/?id=%e6%b3%a81%ef%bc%9a%e4%bd%bf%e7%94%a8-iconfont

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

5 participants