:after和:before中的content（放入icon）

作者：zccst

最近见到一种图标写在content里的用法，觉得很新奇。查了一下是webfont。

问题：以下是我看到的一段css的源代码，其实就是在分享到为微博的时候的图标

a#end_cc, a#twitter, a#weibo {
margin: 0 5px;
border-bottom: none;

}

a#end_cc:before, a#twitter:before, a#weibo:before {
font-size: 24px;
font-family: "fontello";

}

#end_cc:before {
content: "\e7a5";

}

#twitter:before {
content: "\f309";

}

#weibo:before {
content: "\f33f";

}

其中不太明白的是\f309
这些是如何定义的，我在网上找也没有找到。
在 利用css的content:'f003'生成的内容，这里用到的是什么技术？ 里有人提到，就是我想问的。但是我也找了回答给出的链接，还是不特明白。
现在我想在这个基础上自己做一个分享到豆瓣的小图标。不知道应该怎么搞？

现在的效果就会是这个样子的。我要继续仿照应该怎么搞？

解答：

这个是webfont

在css里面，如果想使用某个字体，但是又担心用户电脑上没有，就可以使用font-face属性从服务器上引用这组字体。具体怎么用，搜一下font-face就很清楚了，不多说。

其中不太明白的是\f309
这一段css表示：
在节点#twitter前面，插入一段内容（"\f309"）。
这个内容（"\f309"）是一个字符，f309是这个字符的16进制unicode编码。
不理解可以把 "\f309" 改成 "\6211" ,然后查看效果。事实上 content:"我" 和 content:"\6211" 的含义是一样的。

需要知道，计算机里面每个字符都有一个unicode编码,比如「我」的unicode是6211（16进制），而字体文件的作用是规定某个字符应该用什么形状来显示。
unicode字符集里面，E000 至 F8FF属于用户造字区。原本是空的，用户可以在字体文件里面随便定义这些字符的形状。我们所见的webfont icon，一般就选在这一部分。
（上面这段讲得可能不专业，大致知道是这么一回事就行。）

要使用自定义字符，大致步骤是：

1. 自己造一个字体文件，把e000所对应的字符形状画上新浪的icon，保存为常用字体文件格式。
2. 在css中使用font-face引用这个字体文件，任意命名（不和已有的重复，比如叫myfonticon）
3. 需要显示图标的地方定义font-family为myfonticon，content属性设为"\e000"。

造字可以用Fontographer 5，参考这篇文章webfont应用系列（二）如何制作图标字体？

其实网上已经有一大堆免费好用webfont icon，比如：
IcoMoon App
Ionicons: The premium icon font for Ionic Framework
Fontello - icon fonts generator

下面是在网上找到的关于content的用法。

1，最基本的 – 生成内容

content使用如下：

h2:before {
   content: "我是额外文字！";
}

此段样式的作用是在每个h2标签的前面添加文字“我是额外文字”。

2，使用计数器常见号码内容。

ul和li有sectioncounter属性

3，为多语言内容插入正确的引号

不同的语言使用不同的引号字符。比如英文的引号就是""，而中文引号就是“”。使用content可以使得不同的语言使用对应的一些字符。例如，我们需要对下面的些文字添加其对应语言的引号，该怎么办呢？

<p lang="en"><q>It’s only work if somebody makes you do it.</q></p>
<p lang="no"><q>Hvis du forteller meg nok en vits, så skal jeg slå deg til jorden.</q></p>
<p lang="ch"><q>欢迎来到上海，欢迎参观世博会！</q></p>

我们不妨试试下面的代码：

/* 为不同语言指定引号的表现 */
:lang(en) > q {quotes:'"' '"';}
:lang(no) > q {quotes:"«" "»";}
:lang(ch) > q {quotes:"“" "”";}

/* 在q标签的前后插入引号 */
q:before {content:open-quote;}
q:after  {content:close-quote;}

4，用图片替换文字

关于图片替换技术，您可以参见这里：several image replacement techniques，里面提供了几种方法。而这里展示的则是另外不同的用图片替换方法，使用的是content。

您可以参见下面的代码：

div.logo {
   content:url(logo.png);
}

这种图片替换技术的优点在于文字内容确实被替换了。因此，您没有必要设定高宽为图片的显示创造空间，或是使用text-indent或是padding隐藏最初的文字。

然而，就目前而言，还是有不少需要注意的：
1）你不能对图片进行重复或平铺，或是使用image sprite。
2）目前仅在Opera 9.5+ 和 Safari 4+浏览器下起作用，因为这些浏览器支持所有元素的content方法，而不仅仅局限于:after或是:before。
替换的图片无法应用alt属性，所以一些特殊的使用屏幕阅读器的用户可能无法理解您替换的图片的含义。

5，显示相对应的链接图标

指的是针对不同的链接类型，在链接的后面显示对应链接类型的图标，例如，链接的对象是一个图片，则显示图片的小图标，如果链接对象是视频，则显示视频小图标，如果链接就是个URL网页链接，则显示链接的小图标。您可以参见下面的代码：

CSS代码：

p a[href $=".pdf"]:after {
    content:url(../image/icon_pdf.png);
}
p a[rel = "external"]:after {
    content:url(../image/icon_link.png);
}

HTML代码：

<p>您可以查看此PDF文件：<a href="/sample.pdf">web站点的性能优化.pdf</a>，或是在线查看，<a href="http://www.zhangxinxu.com/wordpress/" rel="external">点击这里</a>。</p>

结果如下图所示：