css content 如何自定义生成图标?
链接:https://www.zhihu.com/question/22022905/answer/20585820
来源:知乎
著作权归作者所有,转载请联系作者获得授权。
- :before(或:after)是什么玩意?
答:伪元素(注意,不是伪类)。
它虽然被收录到css3标准中,但其实主流浏览器都已经支持伪元素了,这其中包括了IE8+。
伪元素实际上在html dom中不存在,但会被浏览器渲染成html的一个节点,比如题主提到的#twitter:before,就是在#twitter这个标签里的开始处插入了一个子元素(节点),同理,:after是在该元素的最后插入子元素,它与以下html具有相同的效果:
<div id="twitter">
<span></span><!-- 或者一个div -->
.....
</div>
伪元素与一个CSS属性息息相关,就是content,顾名思义,这是定义伪元素内容的,如:
#twitter:before{
display:inline;
content:'我是个伪元素';
}
相当于:
<div id="twitter">
<span>我是个伪元素</span>
.....
</div>
最广泛的应用大概是这样的:
&lt;img src="https://pic1.zhimg.com/c0371e2dda7310a7534b4d1386545ba8_b.jpg" data-rawwidth="269" data-rawheight="181" class="content_image" width="269"&gt;
剩下的小问题容我吃完饭来说。
==============
2.‘\f33f’是如何被显示为图标的?
答:
这里用到了WebFont,也就是一种“字体”,这种字体包含了矢量图标,诸如 ‘\f33f’就是对应矢量图标的编码。
你这段代码并不全,css里应该还包含这段:
@font-face {
font-family: 'XXX'; /* 给你的自定义WebFont命名 */
src:url('xxx.eot');
src:url('xxx.eot?#iefix') format('embedded-opentype'),
url('xxx.woff') format('woff'),
url('xxxn.ttf') format('truetype'),
url('xxx.svg#micon') format('svg');
font-weight: normal;
font-style: normal;
...
}
它的好处是不必再使用css spirit切图了,而且作为矢量图可以以任意你想要的尺寸显示,另外,这种方法兼容性很好(ie6 7 可以显示,前提是你为不同的浏览器准备了不同的字体文件格式,如eot、woff、ttf、svg)。
如何制作它?请参见@朱勃 的答案,已经很详细了,不再赘述。
3.直接将icon的unicode写在html上不就成了,为什么还得费劲加伪元素:before呢?
答:
从这段代码看,你知道'\f309'、'\f33f'分别代表的是哪些图标么?
别说你看不出来,即使WebFont的作者也看不出来啊,这些unicode编码显然不如html的class或者id语义化。如果在一个大型网站上多处复用这些font icon,那是相当要命的(每用一次就去查一查?),因此,就出现了一种题主展示的解决方案:
HTML:
<i class="icon icon_open"></i>
CSS:
@font-face{
font-family: 'MyFont'; /* 给你的自定义WebFont命名 */
src:url('xxx.eot');
src:url('xxx.eot?#iefix') format('embedded-opentype'),
url('xxx.woff') format('woff'),
url('xxxn.ttf') format('truetype'),
url('xxx.svg#micon') format('svg');
font-weight: normal;
font-style: normal;
...
}
.icon{
font-family: 'MyFont';
speak:none; /* 无障碍阅读所需要的,告诉屏幕阅读器不要读这个字符 */
font-size:14px;
font-variant:normal;
font-weight:normal;
text-transform: none;
...
}
.icon_open:before{
content:"\f001"; /* 相应图标的编码 */
...
}
然后你只要在任何你想使用该图标的地方插入HTML即可:
<nav>
<a href="open.html"><i class="icon icon_open"></i>Open</a>
</nav>
转自:https://www.zhihu.com/question/22022905
css content 如何自定义生成图标?的更多相关文章
- CSS学习笔记----CSS3自定义字体图标
响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...
- CSS content内容生成技术以及应用
content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部分的浏览器支持:(Firefox 1.5+, Safari 3.5+, IE ...
- CSS content内容生成技术以及应用(转)
一.哗啦哗啦的简介 zxx://这里“哗啦哗啦”的作用是为了渲染一种氛围.content属性早在 CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部 ...
- 基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作
在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这 ...
- CSS content应用
一.简介 content属性早在 CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部分的浏览器支持:(Firefox 1.5+, Safari 3. ...
- 在项目中增加自定义icon图标
以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...
- (转)基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作
http://www.cnblogs.com/wuhuacong/p/4093778.html 在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界 ...
- 关于阿里图标库Iconfont生成图标的三种使用方式(fontclass/unicode/symbol)
1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧 ...
- sench touch 自定义小图标(转)
自定义图标的方法 Sencha touch自带图标有限,有时需要自己添加图标.下面介绍自定义图标的方法: 首先需要生成图标字体.有许多网站提供在线生成图标字体的功能,比如IcoMoon,通过这个网站, ...
随机推荐
- 从梯度下降到Fista
前言: FISTA(A fast iterative shrinkage-thresholding algorithm)是一种快速的迭代阈值收缩算法(ISTA).FISTA和ISTA都是基于梯度下降的 ...
- CSS代码实例:用CSS代码写出的各种形状图形
一共收集整理了图形20个,比较实用,同时也为了熟悉CSS的代码.整合了一下,有错误欢迎指出. 1.正方形 #square { width: 100px; height: 100px; backgrou ...
- 招聘前端、Java后端开发、测试、Mysql DBA
公司介绍: http://www.lagou.com/gongsi/43095.html http://www.yamichu.com 简历发到: zhuye@yamichu.com 招聘职位: JA ...
- JavaScript的理解记录(6)
---接上篇: 四.CSS相关: 1.CSS不支持注释// 支持注释/* */ 2. 几种浏览器厂商前缀: Firefox : -moz-; Chrome:-webkit- ; IE: ...
- java高新技术-枚举
1.什么是枚举 枚举是jdk1.5后才增加的新特性 用枚举就是要规定一个新的类型,那么要用这个类型的值就必须是我规定的那些值.如果不是那些值,编译器就会报错,好处是编译时就会做出判断 2.用普通类模拟 ...
- iOS 图片大小压缩 图片尺寸处理
图片的压缩其实是俩概念,1.是 “压” 文件体积变小,但是像素数不变,长宽尺寸不变,那么质量可能下降,2.是 “缩” 文件的尺寸变小,也就是像素数减少.长宽尺寸变小,文件体积同样会减小. 这个 UII ...
- Js对map的操作
var map = {}; // 赋值 var key = "key1"; var value = "value1"; map[key] = value; // ...
- ArcGIS Server开发教程系列(1) Arcgis server 10.1 的安装
本系列所使用的软件版本如下: Windows 7 X64 / Windows server 2008 X64 Arcgis for Desktop 10.1 Arcgis 10.1 for serve ...
- (转)CPU Cache与内存对齐
转自:http://blog.csdn.net/zhang_shuai_2011/article/details/38119657 原文如下: 一. CacheCache一般来说,需要关心以下几个方面 ...
- FineUI常见问题
常见问题解答(必读) http://fineui.com/bbs/forum.php?mod=viewthread&tid=655