我想知道是否可以利用font-awesome(或任何其他标志性字体)类来创建自定义<li>列表样式类型？
我目前正在使用jQuery来做到这一点,即:
$("li.myClass").prepend("<i class=\"icon-chevron-right\"></i>");
但是,当<li>文本在页面上换行时,这不正确,因为它认为图标是文本的一部分,而不是实际的子弹指示器.
有小费吗？
我在我的网页上使用Font Awesome,我想在:before伪元素中显示一个图标.
根据文档/ cheatsheet,我必须键入以获取此字体,但它无法正常工作.我认为这是正常的,因为不支持HTML实体:before.
所以我用Google搜索了一下,发现如果要显示HTML实体:before,则必须使用转义的十六进制引用.
所以我正在寻找十六进制参考,但我一无所获.我认为这是因为这些都是"私人使用"价值观,无论这意味着什么.
有没有办法让它工作:before？
在字体真棒4中,您可以使用CSS轻松地将图标应用于:before /:after元素.
新的字体真棒5 JS/SVG实现是否可能相同？从我可以看到,这需要相关标签存在于html中,这并不总是实用的,例如你有一个CMS,并希望将图标应用于所有用户创建的内容<li>元素
我知道在FA5中你仍然可以使用旧的css/webfonts但是如果在使用JS的推荐方法中提供相同的功能会很好
我试图span直接从CSS页面更改带有Font Awesome图标的a的内容,但似乎无法使其正常工作.
1)我从文档中导入了FA <head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
2)我的HTML看起来像这样:
<span class='myClass'>Movies</span>
3)现在让我说我想直接从CSS页面用图标更改跨度的内容.
我的css目前看起来像这样,但它不起作用,它给了我一个正方形而不是图标.
.myClass {
visibility: hidden;
}
.myClass::after {
font-family: 'Font Awesome 5 Free';
content: '\f008';
visibility: visible;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">
<span class='myClass'>Movies</span>有趣的是,它看起来像是在使用一些图标.如果我测试content: '\f007';它的工作原理.知道为什么吗？
(如果你想知道我为什么要直接在CSS中更改图标,那是因为我正在使用媒体查询,所以我不能直接在HTML页面中添加它)
我试图在一个::before伪元素中插入一个FontAwesome图标attr().原始代码更复杂,但是这会让你知道我想要什么:
<div data-background-icon="\f086"></div>
div::before {
content: attr(data-background-icon);
font-family: "FontAwesome";
}
https://jsfiddle.net/grutcop8/
它不起作用,而嵌入它的通常方法工作正常:
div::before {
content: "\f086";
font-family: "FontAwesome";
}
我错过了什么？
尝试使用Font Awesome图标替换列表项标签上的项目符号类型,但我得到一个空方块:
HTML
ul {
list-style: none;
}
.testitems {
line-height: 2em;
}
.testitems:before {
font-family: "Font Awesome 5 Free";
content: "\f058";
margin: 0 5px 0 -15px;
color: #004d00;
display: inline-block;
}CSS
<script src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<ul>
<li class="testitems">List Item 1</li>
<li class="testitems">List Item 2</li>
<li class="testitems">List Item 3</li>
<li class="testitems">List Item 4</li>
<li class="testitems">List Item 5</li>
</ul>我知道字体库正在加载,因为我能够使用<i class="fas fa-check-circle"></i><li class="testitems">List Item 1</li>并正确呈现字体(虽然没有正确设置样式).