search

thx / cube

跨终端、响应式、低设计耦合的CSS解决方案
http://thx.github.io/cube/
MIT License
421 stars 131 forks source link

支持伪元素方式生成 iconfont #4

Closed cyjake closed 10 years ago

cyjake commented 10 years ago

IE8 以上浏览器，支持 :before 伪元素，因此可以用来提供语义化的 iconfont 写法：

<style>
.iconfont-cube:before {
    content: '\01bc';
}
</style>
<i class="iconfont iconfont-cube"></i>

这样，维护好样式即可，在 HTML 中就可以用得舒服点了。

另外，http://ux.etao.com/fonts 是有元数据的，如果在元数据中假如英文名称，以上样式支持，可以自动生成，下周研究下。

yisibl commented 10 years ago

如果是纯粹装饰性的图标可以考虑使用伪元素生成，但是空标签中推荐使用图片替换文字阐述其具体代表的意义。如果不想被读屏软件索引可以不写或者指定忽略。但是类似 一淘 这样的文字性的图标，推荐直接使用其实体字符，以提供更好的可访问性和 fallback

yisibl commented 10 years ago

目前还有项目需要支持IE6-7，如果使用两套方案，维护成本较大。

cyjake commented 10 years ago

不至于，相当于另外的模块，不需要支持 IE6-7 可以引入，并且安心用。这个文件内容应该可以自动生成，因为现在的字体 icon 都是有元数据的。

yisibl commented 10 years ago

现在使用 Google 自动翻译图标汉字名称到英文，多个单词中间用-连接，最终生成一份英文的名称对应 16 进制的编码，供scss调用： https://github.com/thx/cube/blob/gh-pages/scss/_data.scss