如何使用Font Awesome的数据属性？

我想将rel内容转换为Font Awesome CSS图标,因此我不必为简单菜单编写20行.

也许一些代码会让它更容易理解.

我试着这样做:

a:before {content: "\(" attr(rel) ")"; font-family: 'FontAwesome';}

基本上我试图转换内部的值rel 并将其转换为有效的CSS规则.

所以链接看起来像这样:

Example

最终结果应该类似于:

a:before {content: "\f291")"; font-family: 'FontAwesome';}

Stickers.. 7

虽然这个问题可能与此帖重复.简单来说 - 您需要使用HTML实体或unicode字符本身才能在CSS content属性中使用它.

然而,使用Font Awesome的技术是一个非常有趣的想法,所以我写这个答案,并为它添加额外的信息.

我建议使用数据属性data-,而不是rel作为rel专为链接类型.

在这个页面上有一套完整的Font Awesome unicode表.您可以复制/粘贴unicode字符或图标本身.以下示例:

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");

a::before {
  font-family: 'FontAwesome';
  content: attr(data-fa-icon);
}

 Unicode example
 Icon example

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");

a::before {
  font-family: 'FontAwesome';
  content: attr(data-fa-icon);
}

 Unicode example
 Icon example