没有成功的把下面一段改一下：src:url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
把 "format('truetype')"后面的逗号去掉或改成分号
4 赞
2015-02-02 15:12
相信绝大部分同学都会加link，但是很多同学会忘了修改iconfont.css里面的url，放在fonts下的就要改为：
url("../fonts/iconfont.eto")
1 赞
2015-03-11 14:54
主要代码：将mui默认的icon（如mui-icon-home）替换成iconfont icon-nanzhuang，修改后预览效果如下：
这样原来的home图标不就没了。这不算增加算替换吧。。 感觉还不如直接上图片。。。。额。这个网页的评论有BUG，超过5行就点不到确认了。。
0 赞
2015-03-21 02:34
1.修改了css\iconfont.css中的路径
@font-face {font-family: "iconfont"; url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ } .iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; } .icon-bianjiwenjian:before { content: "\e603"; } 2. 也将iconfont.ttf放在fonts目录下了 3. 使用 <span class="mui-icon iconfont icon-bianjiwenjian"></span> 可是看不到图标，显示空白，是哪里配置有问题吗
1 赞
2015-05-06 15:32
@font-face {font-family: "iconfont";
url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ } 找到原因了，是应该这里 url 后面多了个 逗号 ，
2 赞
2015-05-06 15:46
没搞定的朋友严格核对一下：
1.注意src,还有分号。 @font-face { font-family: "iconfont"; src: url('../fonts/iconfont.ttf') format('truetype'); } .iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; } .icon-gouwuche:before { content: "\e600"; } 2.注意link css.
2 赞
2015-06-21 23:43
如若还不行的话， 注意这句话。 “主要代码：将mui默认的icon（如mui-icon-home）替换成iconfont icon-nanzhuang”
0 赞
2015-08-05 11:01
将iconfont.css及iconfont.ttf两个文件分别拷贝到mui工程css及fonts目录下,mui目录是哪里？我的只显示文字，怎么弄啊
0 赞
2015-08-06 10:59
1、css改成了这样：
@font-face {font-family: "iconfont"; src: url('../fonts/iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ } .iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } .icon-huifu:before { content: "\e600"; } .icon-gerenxinxi:before { content: "\e601"; } .icon-fatie2:before { content: "\e602"; } 2、ttf也已经放到了fonts下面。 3、页面代码： <span class="icon-gerenxinxi"></span> 为什么显示出来的只是一个白色的小框框？
0 赞
2015-08-10 17:46
sunrise52java 回复 DCloud_MUI_CHB
1、css改成了这样：
@font-face {font-family: "iconfont"; src: url('../fonts/iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ } .iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } .icon-huifu:before { content: "\e600"; } .icon-gerenxinxi:before { content: "\e601"; } .icon-fatie2:before { content: "\e602"; } 2、ttf也已经放到了fonts下面。 3、页面代码： <span class="icon-gerenxinxi"></span> 为什么显示出来的只是一个白色的小框框？
0 赞
2015-08-10 18:24
sunrise52java 回复 DCloud_MUI_CHB
页面也已经引入css文件
<link rel="stylesheet" href="css/iconfont.css" />
0 赞
2015-08-10 18:25
DCloud_MUI_CHB 回复 sunrise52java
需要加上iconfont类，如：<span class="iconfont icon-gerenxinxi"></span>
0 赞
2015-08-11 10:22
再帮楼主总结一下：
1.需要iconfont.css及iconfont.ttf两个文件，分别放到项目中的CSS和fonts下面 2.修改iconfont.css（参照楼主的做法，注意src:url（）后面结尾是分号，或者没有） 3.在你自己的.html文件中添加链接<link href="css/iconfont.css" rel="stylesheet"/>（在<script></script>中间） 刚开始也是找了度娘好多次，都没解决，后来才回到了最开始的地方（Dcloud.ask）,看了楼主的贴，自己摸索了一下，才把这个问题解决了，感谢。
3 赞
2015-08-15 11:51
可以实现的，有不懂的地方，可以咨询QQ:54954645
<span class="mui-icon iconfont icon-jixieshebei"></span>
0 赞
2015-08-23 20:40
看你的iconfont.ttf怎么生成的，若同样是从iconfont.cn网站上下载生成的，则在iconfont.cn上选择该项目，继续增加图标即可
0 赞
2015-09-29 16:17
---------------------------------------淫荡的分割线----------------------------------------------
当你看到我发的信息的时候，恭喜你，按着我说的做保证你成功： 1、css里面只修改路径,也就是 ../fonts/xxx，什么都不要删除 2、将所有字体和css都拷贝到对应的文件夹、 3、在页面中link导入css文件 4、加上css属性即可
1 赞
2015-10-30 16:07
文章中有段文字会产生误解“将iconfont.css及iconfont.ttf两个文件分别拷贝到mui工程css及fonts目录下，然后即可在mui中引用刚生成的字体图标，我们以选项卡为例，代码如下”。完整的描述应该是“将iconfont.css及iconfont.ttf两个文件分别拷贝到mui工程css及fonts目录下，然后即可在mui中通过link的形式引用刚生成的字体图标CSS文件，我们以选项卡为例，代码如下”。误解点在于：以为这个框架有什么机制会自动引用css中内容，不需要通过link的方式引入。而且贴出来的代码也没有贴出link。
0 赞
2016-01-21 14:35
我出现的问题是，Safari和chrome上的图标显示良好；但是android4.4（三星）上图标是乱码，android5.1（魅族）上图标不出现。求楼主解答啊指点我下。
0 赞
2016-01-27 22:31
我也找这个问题很久,最终还是解决了.
由于是按提示照搬,当我们删除多余后会出现下列代码: @font-face {font-family: "iconfont"; url('../fonts/iconfont.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ } 而我们需要在url 前面加入 src: 即可: @font-face {font-family: "iconfont"; src:url('../fonts/iconfont.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ }
1 赞
2016-03-03 11:16
出现小框我是自己改了路径为相对路径，不要用绝对路径
src:url('../fonts/iconfont.ttf?t=1461033497') format('truetype');/* 而且.icon-wode:before { content: "\e600"; }与原来的重复需要把原先的先删除，再添加进来才会显示的
0 赞
2016-04-19 10:59
我的解决方案如下，希望可以帮助大家
@font-face { font-family: "iconfont"; src:url(../fonts/iconfont.ttf) format('truetype') /*修改这个位置*/ }
0 赞
2016-04-21 16:25
这只是弱集成吧 说白了就是引用一个外置的字体 到mui对应目录结构 强集成应该修改属性名称使得引用和自带结构一致，不过外置的又没有less或saas 批量修改麻烦
0 赞
2016-04-30 04:50
|
|
|
