CSS attr() - 在之前/之后动态设置FontAwesome字形

时间:2015-07-20 13:49:01

标签: html css attributes font-awesome attr

我试图通过CSS属性 attr(属性) 在span或按钮内动态设置FontAwesome字形。

我想要的是在标签上设置属性

<button glyph="\f005"></button>

然后在CSS文件中使用它,就像这样

button::before{
     content: attr(glyph)
}

但看起来它不起作用,只显示我在标签中写的代码。有没有办法'#34;渲染&#34;代码或让CSS将其视为转义字符?

快速查看此Fiddle

2 个答案:

答案 0 :(得分:5)

尝试将glyph属性的值设置为HTML实体,例如glyph="&#xf005;"

答案 1 :(得分:4)

首先,您的CSS应该是df1 <- structure(list(a = c("A.1", "A.2", "A.3", "B.1", "B.2", "B.3" ), b = c(1L, 2L, 1L, 2L, 2L, 1L)), .Names = c("a", "b"), class = "data.frame", row.names = c(NA, -6L)) SELECT TableA.Id, TableA.FieldA, TableA.SomethingElse, [Concatenation of TableB.FieldB] = (STUFF((SELECT CAST(', ' + TableB.FieldB AS VARCHAR(MAX)) FROM TableB WHERE (TableA.FieldA = TableB.FieldA_FK) FOR XML PATH ('')), 1, 2, '')) FROM TableA ,而不仅仅是function displayRecursive($array){ echo "<ul>"; foreach($array as $value){ echo "<li><a href='#'>".$value['name']."</a>"; if(isset($value['children']) && !empty($value['children'])){ displayRecursive($value['children']); } } echo "</ul>"; } 。您只能在这些中使用 function recursive($parentId=0){ $return = array(); $titles=$this->db->query(" SELECT `t1`. * , `t2`.`id` AS `has_children` FROM `titles` `t1` LEFT JOIN `titles` `t2` ON ( `t1`.id = `t2`.`parent_id` ) WHERE `t1`.`parent_id` = '$parentId' GROUP BY `t1`.`id` ")->result_array(); if(!empty($titles)){ foreach ($titles as $k=>$title){ $item = $title; if ($title['has_children']>0){ $item['sub'] = self::recursive($title['id']); } array_push($return, $item); } } return $return; }

其次,在HTML中,您编写的实体如button::before,而不是button::after,您将它混合了一点。想象一下,实体变成单个字符,然后它被转移到CSS中,而不是以另一种方式。在HTML中,您需要使用HTML实体,并且在CSS中使用CSS实体,即使它们将以某种方式通过两种语言。

第三,不要使用像button这样的非标准属性。它们应该加上content

请参阅http://codepen.io/ondrakoupil/pen/XbBvzV