这是描述问题的两张照片 这是描述问题的两张照片 这是描述问题的两张照片
我希望图标这样定位
我用过
vertical-align: top;
line-height: 33px;
但它不起作用，这是完整的代码 https://jsfiddle.net/8aho9sw5/
.nav3 ul{
background: rgb(231, 125, 125);
display:flex;
width: 800px;
margin:0 auto;
margin-bottom: 6rem;
padding:0;
justify-content: space-around;
}
.nav3 ul li{
list-style: none;
width: 100%;
}
.nav3 ul li a{
border: 3px solid rgb(25, 0, 255);
display: block;
text-align: center;
text-decoration: none;
font-size: 22pt;
padding-top: 3rem;
padding-bottom: 3rem;
padding-right: 2rem;
padding-left: 2rem;
}
.nav3 ul li a:hover{
background: rgb(95, 155, 125);
}
.home-icon:before{
vertical-align: top;
line-height: 33px;
border: 3px solid rgb(0, 255, 13);
content: "\f055";
font-family: FontAwesome;
}<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Flexbox Menu Demos</title>
<meta
name="description"
content="Various flexible box menu demos from Morten Rand-Hendriksen, staff author at lynda.com"
/>
<link rel="stylesheet" href="test.css" type="text/css" media="all" />
<link
rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
/>
</head>
<body>
<nav class="nav3">
<ul>
<li><a href=""><span class="home-icon"></span>home</a></li>
<li><a href="">contact</a></li>
<li><a href="">about</a></li>
<li><a href="">food</a></li>
</ul>
</nav>
</body>
</html>最佳答案
我不太明白你到底想要什么。但我想这个链接会帮助你实现你想要的。如果你想对齐 flexbox 顶部的元素，你可以使用例如
nav-item {
align-items: flex-start
}
关于html - 使用 css 定位 fontawesome 图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57945188/