使用CSS定位fontawesome圖標
[英]positioning fontawesome icons using css
問題描述
這是兩張描述問題的照片這些是兩張描述問題的照片這些是兩張描述問題的照片
我希望圖標定位成這樣
我用了
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>
3 個解決方案
解決方案1
0 2019-09-15 14:52:26
我不太了解您到底想要什么。 但是我想這個鏈接將幫助您實現所需的功能。 如果要在flexbox頂部對齊項目，可以使用例如
nav-item {
align-items: flex-start
}
解決方案2
0 2019-09-15 17:27:37
您是否期望這樣：
.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%; border: 3px solid rgb(25, 0, 255); } .nav3 ul li a { display: flex; flex-direction: column; 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; } span { margin-left: -75%; }
<!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="">home<span class="home-icon"></span></a></li> <li><a href="">contact</a></li> <li><a href="">about</a></li> <li><a href="">food</a></li> </ul> </nav> </body> </html>
解決方案3
0 2019-09-15 17:48:33
有幾種方法可以做到這一點。 最簡單的方法是將:before be定位:before絕對位置，然后將top位置設置為所需的任何距離。 （絕對定位的元素不會調整其父對象的高度/寬度）。 請記住，您需要將父級設置為position: relative以便基於該位置。
.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 { position: relative; display:inline-block; min-width: 60px; } .home-icon:before{ border: 3px solid rgb(0, 255, 13); content: "\\f055"; font-family: FontAwesome; position: absolute; top: 10px; }
<!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>
CSS內容中的FontAwesome圖標
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.