如何在HTML和CSS中使用真棒字体？

Question

我正在尝试使用 fontawesome.com 中的图标，但它没有显示在我的网页上。我的目标是拥有一个自定义播放按钮，但我得到的是一个矩形。

我检查了拼写错误或拼写错误等逻辑错误。但是，我不太确定网页上的 link 是否正确。

这是我的index.html

<!DOCTYPE html>
    <html lang= "en">

    <head>
        <title>Assignment 4 </title>
        <meta charset="UTF-8">
        <meta http-equiz="X-UA-Compatible" content="ie=edge">
        <meta name="viewport content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">


    </head>
__________________________________________________________________________
*This is my style.css *

.buttons button:before{
    content: "\f04b";
    font-family: "Font Awesome 5 Free";
    width: 30px;
    height: 30px;
    display: inline-block;
    font-size: 28px;
    color: #fff;
    -webkit-font-smoothing: antialiased;

}

.buttons button.play:before{
    content: "\fo4b";
}

    .buttons button.pause:before{
        content: "\fo4c";

}

我希望我的代码输出在嵌入视频下方显示播放图标，但它显示的是方形图标。

Answer 1

使用font-family:FontAwesome;代替"Font Awesome 5 Free";

Answer 2

将font-family: "Font Awesome 5 Free";替换为font-family: FontAwesome;

.buttons button:before{
    content: "\f04b";
     font-family: FontAwesome;
    width: 30px;
    height: 30px;
    display: inline-block;
    font-size: 28px;
    color: #fff;
    -webkit-font-smoothing: antialiased;

}

如何在HTML和CSS中使用真棒字体？

How to use font awesome in HTML and CSS?

html

css

font-awesome