fontawesome 5 font-family无法正常工作

时间：2017-12-13 08:48:10

标签： css fonts font-awesome-5

我将fontawesome 5集成到一个带引导程序4的项目中。当我通过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'

16 个答案:

答案 0 :(得分：95)

您的Unicode错误f107 

a::after {
  content: "\f007";
  font-family: 'Font Awesome\ 5 Free';
}
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
<a>User</a>
<i class="fas fa-shopping-basket"></i>

或者在其他情况下，font-weight: 900;会为您节省开支。字体中的一些图标很棒5没有font-weight: 900;时无效。

a::after {
  content: "\f007";
  font-family: 'Font Awesome\ 5 Free';
  font-weight: 900;
}

答案 1 :(得分：64)

奇怪的是，你必须在某些图标中加上' font-weight：900 '才能显示它们。

#mainNav .navbar-collapse .navbar-sidenav .nav-link-collapse:after {
  content: '\f107';
  font-family: 'Font Awesome\ 5 Free'; 
  font-weight: 900; /* Fix version 5.0.9 */
}

答案 2 :(得分：13)

问题出在font-weight 对于Font Awesome 5，您必须使用{font-weight:900}

答案 3 :(得分：8)

使用fontawesome-all.css文件：将“Brands”字体系列从“Font Awesome 5 Free”更改为“Font Awesome 5 Brands”修复了我遇到的问题。

我无法承担所有责任 - 我在查看CDN版本之前修正了我自己的本地问题：https://use.fontawesome.com/releases/v5.0.6/css/all.css

他们也在CDN上解决了这个问题。

 @font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: normal;
    src: url("../webfonts/fa-brands-400.eot");
    src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

    .fab {
    font-family: 'Font Awesome 5 Brands'; }
    @font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

答案 4 :(得分：5)

要求900的重量不是怪异的，而是FontAwesome故意添加的限制（因为它们共享相同的unicode但只是字体粗细不同），这样您就不会再使用“ solid”和“ light”图标了，其中大多数仅在付费的“专业版”中可用。

答案 5 :(得分：3)

从FontAwesome 5开始，您必须启用新的“searchPseudoElements”选项才能以这种方式使用FontAwesome图标：

<script>
  window.FontAwesomeConfig = {
    searchPseudoElements: true
  }
</script>

另请参阅此问题：Font awesome 5 on pseudo elements和新的Font Awesome API：https://fontawesome.com/how-to-use/font-awesome-api

另外，将CSS代码中的font-family更改为

font-family: "Font Awesome 5 Regular";

答案 6 :(得分：3)

我已经尝试过上述所有适用于 Font Awesome 5 的解决方案，但是它对我没有用。 :(

最后，我找到了解决方案！

只需在CSS中使用font-family: "Font Awesome 5 Pro";，而不要使用font-family: "Font Awesome 5 Free OR Solids OR Brands";

答案 7 :(得分：2)

我不想使用＆＃39; all＆＃39;版本，所以搜索了＆＃39; fontawesome-all.min.css＆＃39; ＆＃39; family＆＃39;的文件（以前包含在标题中）标记并在末尾找到声明@font-face{font-family:**Font Awesome\ 5 Free**;font-style:normal;

因此，在我想要使用 content: "\f0c8"; 代码的元素的样式表中，我已添加（或更改为）font-family: Font Awesome\ 5 Free;并且它有效

.frb input[type="checkbox"] ~ label:before {
    font-family: Font Awesome\ 5 Free;
    content: "\f0c8";
    font-weight: 900;
    position: absolute;
}

答案 8 :(得分：1)

npm我-保存@ fortawesome / fontawesome-free

我的Sccs：

@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";

对我来说很好！

答案 9 :(得分：1)

奇怪的是，您必须包括字体家族和字体粗细才能起作用。 这是对我有用的东西：

.second-section-header::after {
    content: "\f259";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
}

从那里，您可以开始添加所需的任何样式。

让我们说：

.second-section-header::after {
    content: "\f259";
    font-family: 'Font Awesome\ 5 Free';
    font-weight: 900;
    font-size: 100px;
    color: white;
    z-index: 1;
    position: absolute;
}

我希望这会有所帮助。

答案 10 :(得分：0)

我找到了解决方案。

  • 整合fontawesome-all.css

  • 在文件末尾搜索第二个@ font-face并替换

    font-family：'Font Awesome 5 Free';

使用

font-family: 'Font Awesome 5 FreeR';

并替换：

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }

使用

.far {
  font-family: 'Font Awesome 5 FreeR';
  font-weight: 400; }

答案 11 :(得分：0)

解决方案就像普通字体一样调用它：

$(document).ready(function() {

    var quantitiy = 0;
    $('.quantity-right-plus').click(function(e) {

        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        var quantity = parseInt($('#quantity').val()); //10

        // If is not undefined

        $('#quantity').val(quantity + 1);

        // Increment

    });

    $('.quantity-left-minus').click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        var quantity = parseInt($('#quantity').val());

        // If is not undefined

        // Increment
        if (quantity > 1) {
            $('#quantity').val(quantity - 1);
        }
    });

});

答案 12 :(得分：0)

如果您将 SVG与JavaScript结合使用，则需要启用此功能，因为默认情况下该功能处于禁用状态。使用

<script data-search-pseudo-elements ... >

在脚本标签内。

答案 13 :(得分：0)

这可能与定价模式有关；;）

https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use 

Solid    Free           fas   <i class="fas fa-camera"></i> 
Regular  Pro Required   far   <i class="far fa-camera"></i> 
Light    Pro Required   fal   <i class="fal fa-camera"></i> 
Brands   Free           fab   <i class="fab fa-font-awesome"></i>

答案 14 :(得分：0)

如果仍然无法使用，我忘记将fa-ul类添加到父（UL）元素上：

<ul class="fa-ul">

连同其他人已经提供的2条建议：

a) font-family: 'Font Awesome\ 5 Free';
b) font-weight: 900;

为我解决了。

FWIW，我的<head>标记中的include只是：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

我正在React和Preact中使用它。不需要任何特殊的React npm安装或组件。

答案 15 :(得分：-1)

我必须将@Component({ ... providers: [{ provide: NG_VALIDATORS, useExisting: CustomDateTimeControl, multi: true }, { provide: NG_VALUE_ACCESSOR, useExisting: CustomDateTimeControl, multi: true }] }) export class CustomDateTimeControl implements OnInit, ControlValueAccessor, Validator { private propagateChange = function (change) { }; private propagateTouched = function () { }; // Inner controls (you can also use an internal FormGroup for this) public date = new FormControl(); public time = new FormControl(); constructor() {} ngOnInit() { this.date.valueChanges .subscribe(value => { this.propagateChange(value + ' ' + this.time.value); this.propagateTouched(); } this.time.valueChanges .subscribe(value => { this.propagateChange(this.date.value + ' ' + value); this.propagateTouched(); } } writeValue(value) { // Need to update the inner controls, but don't use setValue / patchValue, // as that will trigger valueChanges in the above subscriptions, // incorrectly calling touched } registerOnChange(fn) { this.propagateChange = fn; } registerOnTouched(fn) { this.propagateTouched = fn; } validate(control) { // Custom logic to validate the parent control. In this case, // we may choose to union all childrens' errors. let errors = Object.assign(this.localControl.errors || {}, this.remoteControl.errors || {}); return Object.keys(errors).length ? errors : null; } } 设置为true以使其在Angular5中运行。

searchPseudoElements
相关问题
最新问题