Question

我正在尝试使用function arrayDisplay($input){ $goodKeys = array_diff(array_keys($input), array('form', 'captcha')); $data = array(); foreach ($goodKeys as $goodKey) { $data[$goodKey] = $input[$goodKey]; } return '[' . implode( ', ', array_map( function ($v, $k) { $s = 0; if(isset($_SESSION[$k.'_type'])) { $s = $_SESSION[$k.'_type']; } if(is_array($v)) { $v = implode(",",$v); } return sprintf('["%s",%s,"%s"]', $k, json_encode($v), $s); }, $data, array_keys($data) ) ) . ']'; }在::before伪元素中插入FontAwesome图标。原始代码更复杂，但是这可以让您了解我想要的内容：

attr()

https://jsfiddle.net/grutcop8/

它不起作用，而嵌入它的常用方法可以正常工作：

<div data-background-icon="\f086"></div>

div::before {
  content: attr(data-background-icon);
  font-family: "FontAwesome";
}

我缺少什么？

Answer 1

尝试使用Unicode

CSS转义序列仅适用于CSS字符串。当您从HTML属性（即CSS外部）获取CSS转义序列时，它将按字面读取，而不是解释为CSS字符串的一部分。

如果要在HTML属性中对字符进行编码，则需要将其编码为HTML实体。

您应该在font-Awesome图标代码之前添加"&#x"。即，如果您想使用/f086，请改为编写&#xf086

从这里获取unicode - https://fortawesome.github.io/Font-Awesome/cheatsheet/

<强>更新

如果您使用的是fontAwesome 5，请将font-family: "FontAwesome";更改为font-family: 'Font Awesome 5 Free';

＆＃13;

div:before {
  content: attr(data-background-icon);
  font-family: "FontAwesome";
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div data-background-icon='&#xf086;'></div>

＆＃13;

Answer 2

CSS将\f086读取为字符串而不是转义序列。修复是直接在内容属性（如content: '\f086';）内使用它，或直接在HTML属性中复制和粘贴图标（确保将文件保存为UTF-8）

HTML：

<div data-background-icon=""></div> <!-- this is the bluetooth icon copied from fontawesome -->

CSS：

div::before {
  content: attr(data-background-icon);
  font-family: "FontAwesome";
}

或者使用HTML实体：

HTML：

<div data-background-icon="&#xf086;"></div>

CSS：

div::before {
  content: attr(data-background-icon);
  font-family: "FontAwesome";
}

小提琴：https://jsfiddle.net/76v9e2ur/1/

使用attr（）在:: before伪元素内使用FontAwesome图标

2 个答案: