我fontawesome在一个带有bootstrap 4的项目中集成了5个.当我通过css它回想起一个字体时不起作用.与fontawesome 4代码如下:

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
float: right;
content: '\f107';
font-family: 'FontAwesome'; }

我试图更改字体名称,但它不起作用

font-family: 'Font Awesome 5 Free'

我究竟做错了什么？

<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伪元素来运行其他内容，但在复选框内未运行。我愿意接受其他没有伪元素的解决方案。

提前致谢！

小提琴示例：

用FA-4.7拨弄

/* 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>

用FA-5提琴 …

尝试使用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>并正确呈现字体(虽然没有正确设置样式).

我正在使用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>

情况1

我用这个图标: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;
}

有用!

案例2

我用这个图标:https://fontawesome.com/icons/phone？style = solid

如你所见,它是一个solid图标,所以font-family:Font Awesome 5 Solid

h1:before …

1. 我正在使用 CSS 内容属性，因为它的加载速度比标签快。
   
2. “fa-user”图标类有两组图标，即“far”和“fas”，但它们共享相同的Unicode“\f007”。这是个问题。
   
3. 获得的结果只有一个缺点。图标在页面加载几秒钟后加载。因此，它与用户体验混乱。
   
4. 使用标签加起来就是带注释的 HTML 标记。
   

那么，有没有办法我仍然可以使用 CSS 内容属性并在"far"和"fas"类之间切换？

有什么建议可以解决这个问题吗？

我在 HTML 5 画布中使用 FontAwesome 图标时遇到问题，我试过这个：

ct.fillStyle = "black";
ct.font = "20px Font Awesome";
ct.textAlign = "center";

var h = 'F1E2';

ct.fillText(String.fromCharCode(parseInt(h, 16)), x, y);

我尝试导入 FontAwesome CSS 文件，但没有成功！有人可以帮我解决这个问题吗？

谢谢！

我有一个问题,外部链接字符没有显示在伪元素样式.其他角色正在显示.

Font-Awesome 5.0.6免费,CSS/Webfont版本,包含在CDN中:https://use.fontawesome.com/releases/v5.0.6/css/all.css

这适用于我的正常身体内容:

<i class="fas fa-external-link-alt"></i>

在CSS中,这不起作用:

a:after {
  font-family: 'Font Awesome 5 Free';
  content: '\f35d';
}

在伪中使用另一个字符可以工作:

a:after {
 font-family: 'Font Awesome 5 Free';
 content: '\f152';
}

根据文档,外部链接图标是FA5免费套装的一部分:https://fontawesome.com/icons/external-link-alt？style = solid

这是一个错误还是我错过了什么？

编辑1:JS小提琴示例:https: //jsfiddle.net/berjcaLy/4/

编辑2:意外地发现包装<a>标签<b>或<strong>将使外部链接伪图标工​​作.(JSfiddle也更新了)