很少有字体很棒的图标没有显示

Question

我对网页设计还很陌生。我正在尝试在列表项中的 Angular 9 个项目中使用很棒的字体图标。我尝试使用的所有图标都是免费的，我已经使用 pm 安装了相同的图标。我面临的问题是一些图标可以正确显示，但有些图标不能正确显示，请查看所附图片。使用 https://fontawesome.com/icons?d=gallery&m=free 获取图标。看附图。 https://i.stack.imgur.com/kRZpc.png

HTML:

<div class="icons-list">
                    <ul>
                        <li>
                            <div class="media-items">
                                <div class="media-left">
                                    <i class="fa fa-rocket fa-3x"></i>
                                </div>
                                <div class="media-body">
                                    <h4 class="title">56</h4><span class="title-description">Companies we helped</span></div>
                            </div>
                        </li>
                        <li>
                            <div class="media-items">
                                <div class="media-left">
                                    <i class="fas fa-briefcase fa-3x"></i>
                                </div>
                                <div class="media-body">
                                    <h4 class="title">12</h4><span class="title-description">Corporate Programs</span></div>
                            </div>
                        </li>
                        <li>
                            <div class="media-items">
                                <div class="media-left">
                                    <i class="fas fa-globe fa-3x"></i>
                                </div>
                                <div class="media-body">
                                    <h4 class="title">09</h4><span class="title-description">Services Provided across domains</span></div>
                            </div>
                        </li>
                        <li>
                            <div class="media-items">
                                <div class="media-left">
                                    <i class="fas fa-handshake fa-3x"></i>
                                </div>
                                <div class="media-body">
                                    <h4 class="title">32</h4><span class="title-description">Happy Clients</span></div>
                            </div>
                        </li>

                        <li>
                            <div class="media-items">
                                <div class="media-left">
                                    <i class="fa fa-user fa-3x"></i>
                                </div>
                                <div class="media-body">
                                    <h4 class="title">20</h4><span class="title-description">Awesome Employees</span></div>
                            </div>
                        </li>

Style.css


.media-body {
    display: table-cell;
}

.title {
    font-weight: 1000;
    background: -webkit-linear-gradient(#736fb3, #55bce7);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title-description {
    font-style: italic;
    font-weight: bold;
}

angular.json

"styles": [
                            "./node_modules/bootstrap/dist/css/bootstrap.min.css",
                            "./node_modules/font-awesome/css/font-awesome.css",
                            "./src/styles.css"
                        ],

Answer 1

你的css不涵盖fas改成fa，改fa-handshake到fa-handshake-o

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="icons-list">
<ul>
    <li>
        <div class="media-items">
            <div class="media-left">
                <i class="fa fa-rocket fa-3x"></i>
            </div>
            <div class="media-body">
                <h4 class="title">56</h4><span class="title-description">Companies we helped</span>                 </div>
        </div>
    </li>
    <li>
        <div class="media-items">
            <div class="media-left">
                <i class="fa fa-briefcase fa-3x"></i>
            </div>
            <div class="media-body">
                <h4 class="title">12</h4><span class="title-description">Corporate Programs</span>                 </div>
        </div>
    </li>
    <li>
        <div class="media-items">
            <div class="media-left">
                <i class="fa fa-globe fa-3x"></i>
            </div>
            <div class="media-body">
                <h4 class="title">09</h4><span class="title-description">Services Provided across domains</span></div>
        </div>
    </li>
    <li>
        <div class="media-items">
            <div class="media-left">
                <i class="fa fa-handshake-o fa-3x"></i>
            </div>
            <div class="media-body">
                <h4 class="title">32</h4><span class="title-description">Happy Clients</span>
            </div>
        </div>
    </li>

    <li>
        <div class="media-items">
            <div class="media-left">
                <i class="fa fa-user fa-3x"></i>
            </div>
            <div class="media-body">
                <h4 class="title">20</h4><span class="title-description">Awesome Employees</span>
            </div>
        </div>
    </li>
 </ul>

很少有字体很棒的图标没有显示

Few font-awsome icons not getting displayed

html

css

font-awesome

angular