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>

很少显示字体令人讨厌的图标

1 个答案: