如何将文本与字体真棒 5 图标对齐？
[英]How can I align a text with a font awesome 5 icon?
问题描述
我可以使用哪个属性将字体真棒图标与支持一词垂直对齐？ 我的意思是这个导航列表：
<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>
2 个解决方案
解决方案1
2 已采纳 2020-01-19 16:53:14
只需使其弯曲并对齐项目中心即可。
.nav__list--second {
display: flex;
flex-direction: row;
align-items: center;
}
解决方案2
2 2020-01-19 16:55:30
使用 flexbox 和 align-items:center
@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; } .nav ul{ display:flex; align-items:center; }
<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>
如何使字体真棒图标出现在其他文本后面，以模拟背景图像？
[英]How can I make a font awesome icon appear behind other text, as to emulate a background image?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.