Which property can I use to align vertically the font awesome icon with the word support? I mean this navigation list:
<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://[email protected]">
<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://[email protected]">
<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://[email protected]">
<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>Just make it flex and align the items center.
.nav__list--second {
display: flex;
flex-direction: row;
align-items: center;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments