Iconfont在移动端应用的问题

关于部分奇葩用户代理不显示字体图标

以酷派为代表的部分安卓手机自带浏览器、微信/QQ WebView 等用户代理无法正常显示 Icon Font，原因可能是这些用户代理无法正确处理伪元素 content 的五位数的 Icon Font 十六进制编码，详情参考 Iconfont 在移动端遇到问题的探讨，可以通过这个页面进行测试。

解决方式有两种：

  • 将 Icon Font 编码限制在 4 位：Amaze UI 直接使用 Font Awesome，不可能去调整近 500 个图标的编码。
  • 将 Icon Font 的编码直接以内容的形式写进 HTML。

http://www.cnblogs.com/ljack/p/3751678.html

http://amazeui.org/css/icon

https://github.com/allmobilize/amazeui/issues/277

时间： 2024-08-07 04:08:43

Iconfont在移动端应用的问题的相关文章

PC端使用iconfont图标

原来看过iconfont,但是没用过,今天尝试着用了一下!看看怎么用的: 第一步:下载 讲自己需要的图标(可以通过搜索查找)添加到暂存驾,以前是购物车!然后点下载或者存储到CDN. 这个图是偷的: 第二步:看看 下载后大概是这个样子: 里面有个demo.html,打开看看,上面详细讲解了图标的class.字符实体.当然了,还有使用方法 三.使用: 字符实体方式: HTML: <!DOCTYPE html> <html lang="en"> <head>

移动端HTML5性能优化

[导读] 得益于智能手机的普及和各行各业互联网+的运动,移动端的市场占比疯狂增长. 2016年1月发布的2015年电商数据显示,2015年中国移动端网购交易额同比暴涨123 2%,在网购总交易额中的占比首次超越PC端达到55%. 技术上,HTML5大行其道: 1:有数据显示,截至2015,有80%的App全部或部分基于HTML5. 2:谷歌浏览器于9月1日起不在支持自动播放Flash. 3:亚马逊旗下网站(包括Amazon.com门户在内)的所有广告将不再使用flash.在可预见的未来,flas

如何使用iconfont字体图标代替网页图片？

一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜色,可以添加阴影,旋转,透明度等视觉效果. 3.兼容性 图标字体IconFont支持所有现代浏览器,包括IE低版本. 二.IconFont的缺点 1.图标字体只能被渲染成单色或者css3的渐变色: 2.设计自已的IconFont需要花费大量时间,也会增加前端重构的成本: 3.Firefox和IE9不

fontcreator制作iconfont(包含两个教程)

第一步 在AI中画好矢量图,或者是在PS中将纯色的图片存成PNG格式,最好是放大很多倍的纯色图片.因为导入到fontcreator中会显得很小,如果不是矢量,图片拉大后就会有锯齿状. 第二步 选中AI中的矢量图形复制,打开fontcreator,选择一个已经安装过的字体或是选择新建工程,这里采用新建工程来演示. 一般前几个空着的不要动,选择A后点击插入字形就会有这样一个空白的格子,选择这个空白的格子右键 右键然后选择属性,代码点里可以从$E000开始往后写,写完后记得点击右边的闪电标志,进行检索

HTML5前端（移动端网站）性能优化指南

HTML5是一种最新发布网页构架的普遍模型,是构建对程序.对用户都更有价值的数据驱动的Web的前端技术框架,它的价值在于融合CSS/javaScript/flash等众多前端开发技术,更多的体现在对交互的理解和视觉设计的还原上. HTML5框架可以提升网站的访问速度,通过优化前端将响应时间加快,使用户的等待时间减少,所谓前端是指在客户端通过浏览器发送了一个请求,除去后台系 统用户请求.执行数据查询并对结果进行组织所需要处理消耗的时间,在涌现的新技术中,JavaScript和一套新的API纯脚本技

移动端开发心得

1. iOS里fixed中有input或者textarea,用户在里面输入文字,触发键盘,fixed容器会居中显示,而不是继续悬浮 解决办法: http://dwz.cn/CrwNz 2.移动端click时间300ms延迟 解决办法:zepto.js  或者百度touch.js 或者是fastclick.js 3.zepto的touch问题:swipe事件在小米1等低端手机不支持 基本不用zepto 4.百度的touch.js通过touch.on进行绑定事件,但是点击会遇到点透问题,也就是父级触

移动端HTML5开发心得(转）

1. iOS里fixed中有input或者textarea,用户在里面输入文字,触发键盘,fixed容器会居中显示,而不是继续悬浮 解决办法: http://dwz.cn/CrwNz 2.移动端click时间300ms延迟 解决办法:zepto.js  或者百度touch.js 或者是fastclick.js 3.zepto的touch问题:swipe事件在小米1等低端手机不支持 基本不用zepto 4.百度的touch.js通过touch.on进行绑定事件,但是点击会遇到点透问题,也就是父级触

移动端重构系列6——图标

移动端重构系列-mobile 本系列文章,如果没有特别说明,兼容安卓4.0.4+ 这里我们把图标分为三种:背景图片,直接绘制,@font-face.如无特殊情况,图标的标签采用i标签 背景图片 首先我们会选择sprite形式,把所有的图标都放在一个大图中,然后考虑到retina屏,所以我们的图标应该设计为实际大小的2倍,然后设置background-size为实际大小.以下面的msg icon为例: 图中的每个icon大小为24px,实际应用时,我们是以12px来使用的: %icon-msg{

移动端H5优化

查看原文见:https://zhuanlan.zhihu.com/p/25176904 如何优化HTML5在移动设置上的性能表现,首先需要明确以下几个原则: 1.PC优化手段在Mobile端同样适用. 2.在Mobile侧我们提出三秒种渲染完成首屏指标. 3.基于第二点,首屏加载3秒完成或使用Loading. 4.基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB. 5.Mobile端因手机配置原因,除加载外渲染速度也是优化重点. 6.基于第五点,要合理处理