时间戳

首页 > 解决方案 > 我希望图标更进一步和平衡

html - 我希望图标更进一步和平衡

问题描述

navbar我对菜单旁边的图标位置有疑问。我希望图标更进一步和平衡。我从字体真棒中获取图标。

 li a i {
			font-size:1em;
			color: darkseagreen;
			margin:0;
		}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<nav>
	<ul>
		<li><a href="#">ABOUT</a></li>
		<li><a href="#">MEDIA</a></li>
		<li><a href="#">NEWS</a></li>
		<li><a href="#">ATHLETES</a></li>
		<li><a href="#"><i class="fas fa-square-full"></i>PRODUCTS</a></li>
	</ul>
 </nav>

标签： htmlcsspositioniconsfont-awesome

解决方案

你可以用它display: flex来实现这个

li a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

li a i {
        font-size:0.6em;
        color: darkseagreen;
        margin:0 5px 0 0;
    }
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">


<nav>
    <ul>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">MEDIA</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">ATHLETES</a></li>
        <li><a href="#"><i class="fa fa-square-full" ></i>PRODUCTS</a></li>
    </ul></nav>

在这里工作小提琴

推荐阅读