bootstrapで、snsのアイコンが表示されない。


<!doctype html>
<head><link rel="stylesheet" type="text/css" href="a.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="wrapper">
    <header>
         <div class="left">
            <img src="logo-1.png">
        </div>
        <div class="right">
            <ul class="oya">
                <li>Skill</li>
                <li>About</li>
                <li>Contact</li>
        </div>
    </header>
    <img src="cat-1.png">
    <main>   
     　<i class="fab fa-facebook-f"></i>
        <div class="cat">
            <p class="chuo">Skill</p>
            <div class="catp">
                <div class="catt">
                    <img src="cat-2.png">
                </div>
                <div class="catt">
                    <p>We sleep whenever we want.We sleep wherever we</p>
                    <p>Want.All places can be our beds.</p>
                    <p>We sleep whenever we want.We sleep wherever we</p>
                    <p>Want.All places can be our beds.</p>
                    <p>We sleep whenever we want.We sleep wherever we</p>
                    <p>Want.All places can be our beds.</p>
                </div>
                <div class="catt">
                    <p>We sleep whenever we want.We sleep wherever we</p>
                    <p>Want.All places can be our beds.</p>
                    <p>We sleep whenever we want.We sleep wherever we</p>
                    <p>Want.All places can be our beds.</p>
                    <p>We sleep whenever we want.We sleep wherever we</p>
                    <p>Want.All places can be our beds.</p>
                </div>
                <div class="catt">
                    <img src="cat-3.png">
                </div>
                </div>
                </div>
                <div class="cas">
                    <p class="about">About</p>
                        <div class="two">
                        <div class="leftt">
                            <img src="cat-4.png">
                            <p>We are cute.There is no doubt about this.</p>
                                <p>Nobody can’t object to this fact.</p>
                        </div>
                        <div class="leftt">
                            <img src="cat-5.png">
                            <p>We are cute.There is no doubt about this.</p>
                                <p>Nobody can’t object to this fact.</p>
                        </div>
                    </div>
                    <p class="more"><img src="more3.png"></p>
                </div>
    </main>
    <footer>
        <p>CopyRight Muchkin</p>
    </footer>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
    </html>

.wrapper {
    max-width:100%;

} 

header {
  display:flex;
justify-content: space-between;
}

.left {
    flex:1;
}

.left img {
    width:180px;
    height:100px;
    margin-top:14px;
    margin-left:50px;
}

.right {
    margin-top:30px;
}

.oya {
    display:flex;
}

.right li {
    list-style:none;
    margin-left:40px;
    font-size:26px;
    font-weight:bold;
    color:#5F2201;
}

.cat {
    padding-top:48px;
    padding-bottom:50px;
}

.chuo {
    font-size:26px;
    font-weight:bold;
    color:#5F2201;
    text-align:center;
    margin-bottom:100px;
}

.catp {
    display:flex;  
  flex-wrap:wrap;
  gap: 50px 180px
}

.catt {
    flex:1 0 calc(50% - 180px);
    margin-left:50px;
}   margin-bottom:50px;
}

.cas {
    background-color:#FFF3DD;
    padding-bottom:60px;
    padding-top:50px;
}

.about {
    font-size:26px;
    color:#5F2201;
    font-weight:bold;
    text-align:center;
    margin-top:100px;
    margin-bottom:50px;
}

.two {
    display:flex;
    justify-content: space-around; /* 追加 */
    }


    .more {
        text-align:center;
        margin-bottom:100px;
    }

    footer {
        background-color:#B9B9B9;
        height:40px;
        margin-top:-17px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    footer p {
        color:white;
    }

cdnで、bootstrapの記述を<head>ないと</body>の前に記述し、

<main>の後に<i class="fab fa-facebook-f"></i>を記述したのですが、何も表示されません。どうすれば、きちんとsns アイコンが表示されますでしょうか？

行動規範の内容に同意します

回答2件

ベストアンサー

<i class="fab fa-facebook-f"></i>という表記は、Font Awesomeというアイコンライブラリのものですが、それが読み込まれていないようです。

投稿2021/02/16 12:05

maisumakun

総合スコア145208

ドキュメントにちゃんと書いてあります。

Icons

Bootstrap doesn’t include an icon library by default, but we have a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.

で