Question

我有一个使用CSS类的ant html页面显示内容为 f058 的AwesomeFont，但它现在显示为正方形。

HTML： -

<div class="sucessfullChange">

    <div class="sucessfullUsageChangeMessageConfirmation">

    </div>
    <span style="word-break: break-all" class="sucessfullChangeMessage">Congrats.</span>
</div>

CSS： -

.sucessfullUsageChangeMessageConfirmation {
    &:after {
        content: "\f058";
        font-family: "FontAwesome";
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        color: $colorGreen;
        font-size: 31px;
        padding-right: 0.5em;
        position: absolute;
        top: 13px;
        left: 28px;

        @include for-tablet {
            left: 19px;
        }

        @include for-phone {
            top: 14px;
            left: 36px;
        }
    }
}

我在这里做错了什么？

Answer 1

如果你忘了添加font-awesome css liberary，那么Plz会在HTML的head标签中添加链接

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />

我认为它适合你

Answer 2

当图标显示为正方形时，表示它未正确链接。您可以使用此链接cdn icons link

通过cdn链接您的图标

或者您可以选择将图标下载为png图像并将其用于您的工作

http://fa2png.io/

令人敬畏的字体显示为正方形

2 个答案: