我希望图标更进一步和平衡答案

【问题标题】：I would prefer icon to be up a little further and balanced我希望图标更进一步和平衡
【发布时间】：2018-10-05 11:52:57
【问题描述】：

我对@987654321@ 菜单旁边的图标位置有疑问。我希望图标更进一步和平衡。我正在从 font awesome 获取图标。

 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>

【问题讨论】：

如果您使用的是font-awesome，请从<i class="fas fa-square-full" ></i> 中删除s
请澄清您所说的“再往上一点”是什么意思。如果图标要“再往上一点”，那么它就不会平衡：我假设平衡是指垂直居中于“产品”项。

标签： html css position icons font-awesome

【解决方案1】：

你可以使用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>

工作小提琴here

【讨论】：

如果此答案或任何答案解决了您的问题，请考虑通过单击复选标记并投票来接受它。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。 :)

【解决方案2】：

确保您使用的是 Font awesome 5.0.5 版 来支持这一点。改成

<li><a href="#"><i class="fa fa-square-full" ></i>PRODUCTS</a></li>

对于较旧的 Font awesome 第 2 版，您可以使用

<li><a href="#"><i class="fa fa-square" ></i>PRODUCTS</a></li>

https://fontawesome.com/icons/square?style=solid

fa-square

这是 jsfiddle 中使用 Font awesome 4.4.4 的工作示例

http://jsfiddle.net/JfGVE/3672/

你需要更新HTML和CSS如下

<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" ></i>PRODUCTS</a></li>
    </ul>
</nav>

你应该类名而不是直接引用css中的元素

.custom-font {
        font-size:0.6em;
        color: darkseagreen;
        padding-right : 5px;
 }

仅更新您的课程

小提琴：http://jsfiddle.net/JfGVE/3671/

使用

li a i {
        font-size:0.6em;
        color: darkseagreen;
        margin:0;
    }

【讨论】：

这里的custom-font 是什么，为什么我们现在需要？不加这个就不能解决吗？
是的，我可以更新您的代码本身。 jsfiddle.net/JfGVE/3670
提问者使用的是fa-square-full而不是fa-square