时间戳

首页 > 解决方案 > 如何将文本与 font awesome 5 图标对齐？

html - 如何将文本与 font awesome 5 图标对齐？

问题描述

我可以使用哪个属性将字体真棒图标与单词支持垂直对齐？我的意思是这个导航列表：

<nav class="nav">
         <ul class="nav__list--second">
            <i class="far fa-life-ring fa-2x"></i>
            <a href="/support">Support </a>
         </ul>
      </nav>


@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Lato', sans-serif;
   font-size: 16px;
}

header {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 95vw;
   padding: 10px;
   margin: 10px;
}

header .brand img {
   width: 60px;
}

header nav ul {
   list-style: none;
}

ul.nav__list--first {
   vertical-align: middle;
}

header .nav__list--first li,
header .nav__list--second li
{
   text-decoration: none;
   display: inline;
   margin: 10px;
}

header .nav__list--first li a,
header .nav__list--second li a {
   text-decoration: none;
   
}
<head>
<script src="https://kit.fontawesome.com/69b14a4680.js" crossorigin="anonymous"></script>
</head>
<header>

      <div class="brand">
         <a href="/">
            <img src="./assets/images/logo.png" alt="GEM Logo" />
         </a>
      </div>

      <nav class="nav">
         <ul class="nav__list--first">
            <li>
               <a href="/">Home</a>
            </li>
            <li>
               <a href="/company">Company</a>
            </li>
            <li>
               <a href="/solutions">Solutions</a>
            </li>
         </ul>
      </nav>

      <nav class="nav">
         <ul class="nav__list--second">
            <i class="far fa-life-ring fa-2x"></i>
            <a href="/support">Support </a>
         </ul>
      </nav>
   </header>

   <div class="container">

      <main id="main">
         <div class="main">
            
         </div>
      </main>

      <section id="why-choose-us">
         <div class="container">
            <div class="card">
               <div class="card-icon">
                  <i>icon</i>
               </div>
               <div class="card-description">
                  <p>Description</p>
               </div>
            </div>
            <div class="card">
               <div class="card-icon">
                  <i>icon</i>
               </div>
               <div class="card-description">
                  <p>Description</p>
               </div>
            </div>
            <div class="card">
               <div class="card-icon">
                  <i>icon</i>
               </div>
               <div class="card-description">
                  <p>Description</p>
               </div>
            </div>
         </div>
      </section>
   
      <section id="about-us" class="about-us">
         <div class="title">
            <h2>Our Team</h2>
         </div>
         <div class="container">
            <div class="card">
               <img src="./assets/images/team/enrique.jpg" alt="Enrique Massuet" />
               <p>Enrique Massuet</p>
               <p>CEO</p>
               <p>Medical Insurance Specialist.</p>
               <div class="personal-social-icons">
                  <a href="https://twitter.com/uno ahi">
                     <i class="fab fa-twitter"></i>
                  </a>
                  <a href="https://www.facebook.com/emassuet">
                     <i class="twitter"></i>
                  </a>
                  <a href="https://instagram.com/emassuet">
                     <i class="twitter"></i>
                  </a>
                  <a href="mailto://emassuet@gemfs.company">
                     <i class="twitter"></i>
                  </a>
               </div>
            </div>
            <div class="card">
               <img src="./assets/images/team/giosvel.jpg" alt="Giosvel Carril" />
               <p>Giosvel Carril</p>
               <p>CFO</p>
               <p>Life Insurance Specialist.</p>
               <div class="personal-social-icons">
                  <a href="https://twitter.com/uno ahi">
                     <i class="fab fa-twitter"></i>
                  </a>
                  <a href="https://www.facebook.com/emassuet">
                     <i class="twitter"></i>
                  </a>
                  <a href="https://instagram.com/emassuet">
                     <i class="twitter"></i>
                  </a>
                  <a href="mailto://emassuet@gemfs.company">
                     <i class="twitter"></i>
                  </a>
               </div>
            </div>
            <div class="card">
               <img src="./assets/images/team/diesan.jpg" alt="Diesan Romero" />
               <p>Diesan Romero</p>
               <p>CTO</p>
               <p>Technology and Data Science Expert/</p>
               <div class="personal-social-icons">
                  <a href="https://twitter.com/diesanromero">
                     <i class="fab fa-twitter"></i>
                  </a>
                  <a href="https://www.facebook.com/diesan.romero.56">
                     <i class="fab fa-facebook-f"></i>
                  </a>
                  <a href="https://instagram.com/diesanromero">
                     <i class="fab fa-instagram"></i>
                  </a>
                  <a href="https://www.linkedin.com/in/diesanromeros/">
                     <i class="fab fa-linkedin-in"></i>
                  </a>
                  <a href="mailto://diesanromero@gemfs.company">
                     <i class="far fa-envelope"></i>
                  </a>
               </div>
            </div>

         </div>
      </section>
   </div>
   
   <footer class="footer">
      <div class="copyright">
         <p>Copyright</p>
      </div>
      <ul class="social-icons">
         <a href="">
            <i class="fab fa-twitter"></i>
         </a>
         <a href="">
            <i class="fab fa-facebook-f"></i>
         </a>
         <a href="">
            <i class="fab fa-instagram"></i>
         </a>
         <a href="https://www.linkedin.com/company/gemfsolutions/">
            <i class="fab fa-linkedin-in"></i>
         </a>
      </ul>
   </footer>

标签： htmlcss

解决方案

只需使其弯曲并对齐项目中心即可。

.nav__list--second {
  display: flex;
  flex-direction: row;
  align-items: center;
}

推荐阅读