如何在 Font Awesome 中使用数据属性?
How to use data attributes with Font Awesome?
我想将 rel
内容转换成 Font Awesome CSS 图标,这样我就不必为一个简单的菜单写 20 行。
也许一些代码会使它更容易理解。
我试过这样做:
a:before {content: "\(" attr(rel) ")"; font-family: 'FontAwesome';}
基本上我正在尝试转换 rel
中的值并将其转换为有效的 CSS 规则。
所以 link 看起来像这样:
<a href="http://www.example.com" rel="f291">Example</a>
最终结果应该类似于:
a:before {content: "\f291")"; font-family: 'FontAwesome';}
在 css 中无法做到这一点,因为没有变量。您可以使用已编译的 css(如 sass)。另一种方法是 js。第三种方法是在服务器端 html 内添加样式。
尽管问题可能与 重复。简而言之 - 您需要使用 HTML 实体或 unicode 字符本身,以便在 CSS content
属性.[=19= 中使用它]
不过,将这项技术与 Font Awesome 一起使用是一个非常有趣的想法,所以我正在写这个答案,并为其添加额外的信息。
我建议使用数据属性 data-
instead of rel
,因为 rel
是为 link 类型设计的。
并且在 this page 上有一套完整的 Font Awesome unicode 表。您可以 copy/paste 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);
}
<p><a href="#" data-fa-icon=""> Unicode example</a></p>
<p><a href="#" data-fa-icon=""> Icon example</a></p>
我想将 rel
内容转换成 Font Awesome CSS 图标,这样我就不必为一个简单的菜单写 20 行。
也许一些代码会使它更容易理解。
我试过这样做:
a:before {content: "\(" attr(rel) ")"; font-family: 'FontAwesome';}
基本上我正在尝试转换 rel
中的值并将其转换为有效的 CSS 规则。
所以 link 看起来像这样:
<a href="http://www.example.com" rel="f291">Example</a>
最终结果应该类似于:
a:before {content: "\f291")"; font-family: 'FontAwesome';}
在 css 中无法做到这一点,因为没有变量。您可以使用已编译的 css(如 sass)。另一种方法是 js。第三种方法是在服务器端 html 内添加样式。
尽管问题可能与 不过,将这项技术与 Font Awesome 一起使用是一个非常有趣的想法,所以我正在写这个答案,并为其添加额外的信息。 我建议使用数据属性 并且在 this page 上有一套完整的 Font Awesome unicode 表。您可以 copy/paste unicode 字符或图标本身。以下示例:content
属性.[=19= 中使用它]
data-
instead of rel
,因为 rel
是为 link 类型设计的。@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);
}
<p><a href="#" data-fa-icon=""> Unicode example</a></p>
<p><a href="#" data-fa-icon=""> Icon example</a></p>