文本内容：
日常开发中我们常常用到:before和:after伪元素在指定标签前和后增加内容，非常方便，例如：
p:before{
content:'内容'；
}
p:before{
content:'内容';
}如果是想利用:before和:after伪元素插入图标，我们可以用默认的字符图标或者引入图标库比如IconFont-阿里巴巴矢量图标库或者一张图标图片。
字符图标：
字符图标是计算机自带的图标，无需引入其他第三方文件，非常方便，但是有的用户计算机没有这个字符，就会显示成一个方框。
.example:before {
content:'\00AB';
…
}
.example:after {
content:'\00BB';
…
}相关信息
content字符图标大全分享
css教程各种箭头图形样式用于HTML（在字符前加 &#）用于 CSS （在字符前加 ） 和 JavaScript（在字符前加 u）⇠867221E0⇢867421E2⇡867321E1⇣867521E3↞8606219E↠860821A0↟8...
图标库：
图标库可以自定义，灵活很多，但是需要加载很多文件。
首先引入图标库，推荐使用阿里巴巴的Iconfont图标库，不会的看下面教程。
相关信息
阿里巴巴IconFont矢量字体图标库在线工具
在线工具搞前端开发、UI设计的应该都知道这款阿里巴巴IconFont矢量字体图标库在线工具，是国产最大的矢量字体图标库了。而且使用非常人性方便，网站没有多余的内容，打开搜索即...
@font-face {
font-family: 'Iconfont';
src: url('fonts/Iconfont.eot?7kkyc2');
src: url('fonts/Iconfont.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/Iconfont.ttf?7kkyc2') format('truetype'),
url('fonts/Iconfont.woff?7kkyc2') format('woff'),
url('fonts/Iconfont.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}CSS中可以重复调用，不会可以看下面详细教程。
span {
font-family: 'Iconfont';
font-size: 100px;
content:'\00BB';
}相关信息
如何优雅的使用阿里巴巴IconFont字体图标(图文)
经验分享什么叫优雅的使用IconFont字体图标了？就是非常仔细、丝滑、正确的使用，我的站长站从IconFont测试版本开始一直在使用IconFont，总结了许多细节经验分享给大家。1、图...
图片图标：
引入一张图片图标，对于特殊的图标，需要用图片完成的，同样可以before插入到页面中。
p:before{
content:url(iconf.png);/**不可以加“”**/
}需要注意的是引入图片是content：后面不能用“”包起来，会被理解字符串做内容插入到页面中。
上一篇：利用Sass/Less快速将px单位转换rem/em/vw单位教程 下一篇：css开发第一个字符制作圆形文字图标效果 栏目分类帝国CMS教程
织梦cms教程
discuz教程
ecshop教程
phpcms教程
wordpress教程
苹果cms教程
php教程
数据库教程
微信小程序教程
python教程
css教程
js教程
视频教程
电子书
最新更新- 01 text-decoration上 中 下划线使用方法 2个月前
- 02 哀悼日网站变灰色方法 2个月前
- 03 全套@media响应式布局代码方案分享 3个月前
- 04 less响应式布局方案分享 3个月前
- 05 css开发第一个字符制作圆形文字图标效果 3个月前
- 01 为什么bootstrap国内很少人使用 620热度
- 02 IE不显示加载iconfont阿里巴巴图标的解决方法 411热度
- 03 CSS文字超出省略号显示 329热度
- 04 分享IE6 PNG 透明的几种方法 253热度
- 05 CSS定位控制上下左右坐标教程 247热度