时间戳

首页 > 解决方案 > 使用 css 定位 fontawesome 图标

html - 使用 css 定位 fontawesome 图标

问题描述

这是描述问题的两张照片 这是描述问题的两张照片 这是描述问题的两张照片

这是原版

我希望图标像这样定位

但我希望它是这样的

我用了

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>

标签： htmlcssflexbox

解决方案

有几种方法可以做到这一点。最简单的方法是进行: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>

推荐阅读