我们希望能够使用Font Awesome(http://fortawesome.github.com/Font-Awesome/)图标作为CMS中无序列表的项目符号.
CMS上的文本编辑器仅输出原始HTML,因此无法添加其他元素/类.
这意味着当标记显示如下时显示图标:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
如果Font Awesome需要一个不同的font-family属性,那么我可以看到第一个问题,这需要一个单独的元素.
这可能使用纯CSS吗？或者我是否必须使用类似jQuery的东西将元素追加到每个列表项的开头？
我意识到我们可以使用背景图像的后退,但如果可能的话,使用Font Awesome会很棒.
我试图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页面中添加它)
我究竟做错了什么？
<ul>
<li class="facebook"> Facebook</li>
<li><i class="fab fa-twitter-square"></i> Twitter</li>
</ul>
li.facebook:before {
content: "\f09a";
font-family: FontAwesome;
}
li {
list-style:none;
}
JSFiddle:https://jsfiddle.net/labanino/nwodoo32/
字体真棒5星图标有<i class="fas fa-star"></i>和<i class="far fa-star"></i>不同是fas , far和两者的Unicode f005现在我想用它作为我的评级系统,其中第一个是常规明星,点击成为实心明星,但我如何fas far在我的CSS中定义这个？
input.star:checked ~ label.star:before {
content: '\f005';
color: #e74c3c;
transition: all .25s;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
label.star:before {
content: '\f005';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
我的代码在上面我只得到坚实的明星
我试图在CSS的内容中使用FontAwesome.
它出现在图标的代码而不是图标的代码中.我已经关注了在线帮助,但仍然没有工作
css
@font-face {
font-family: 'FontAwesome';
src: url('https://use.fontawesome.com/releases/v5.0.6/css/all.css');
}
.fp-prev:before {
color:#fff;
content: '/f35a';
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
是否有人已经设计了内部带有5个超赞字体图标的复选框？
我已经在Google上搜索过，仅找到FA-4的示例，例如http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/
我更新到FA5并使用CSS伪元素来运行其他内容，但在复选框内未运行。我愿意接受其他没有伪元素的解决方案。
提前致谢！
小提琴示例：
/* Checkboxes */
.checkbox input[type="checkbox"] {
display: none;
}
.checkbox label {
padding-left: 0;
}
.checkbox label:before {
content: "";
width: 20px;
height: 20px;
display: inline-block;
vertical-align: bottom;
margin-right: 10px;
line-height: 20px;
text-align: center;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
font-family: "FontAwesome";
}
.checkbox input[type="checkbox"]:checked+label::before {
content: "\f00c";
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="checkbox">
<input type="checkbox" id="profile_notifications" value="" checked/>
<label for="profile_notifications">
I agree
</label>
</div>我必须在我的网站中使用 font Awesome，我发现我有 2 种方法来实现 Font Awesome。
我想使用 5.0.1 版本，我意识到使用 ALL.CSS 允许我在 CSS 中的 AFTER 类中使用 Font-awesome，但除此之外我不知道有什么区别，以及每一个的用途以及另一个问题，我什么时候应该同时使用两者。
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>
希望用最轻的字体-awesome来实现
嗨,我想在元素之前和之后添加字体真棒图标.但我不知道如何写它的CSS以及如何获得字体真棒图标链接将其放在css之后.
我已经创建了这样的结构.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<style>
.thish{position:relative; height:150px; width:150px ; background:red; }
.thish::before{position:absolute; content:'tyjthsrgd';right:40%; color:#000; bottom:0; height:30px; width:60px; background:green; z-index:1; }
</style>
<body>
<div class="thish">
</div>
</body>
</html>我正在使用font-awesome版本"Font Awesome Free 5.0.6".我目前很困惑使用CSS伪元素中的图标.有4种字体家庭为fontawesome: ,Font Awesome 5 Free,,Font Awesome 5 SolidFont Awesome 5 BrandsFont Awesome 5 Regular
这是HTML:
<h1>Hello</h1>
我用这个图标:https://fontawesome.com/icons/twitter？style = brands
如你所见,它是一个brands图标,所以font-family:Font Awesome 5 Brands
h1:before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
content: "\f099"; /* TWITTER ICON */
font-family: "Font Awesome 5 Brands";
font-weight: 400;
}
有用!
我用这个图标:https://fontawesome.com/icons/phone？style = solid
如你所见,它是一个solid图标,所以font-family:Font Awesome 5 Solid
h1:before …