在命令中
<span style="font-family: arial,helvetica,sans-serif">
<font size="1">
[Country]
</font>
</span>
为什么font-family属性中有多种字体？
这是否意味着如果没有安装arial字体,那么它会转到helvetica？
我试图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页面中添加它)
我试图在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图标替换列表项标签上的项目符号类型,但我得到一个空方块:
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>并正确呈现字体(虽然没有正确设置样式).