Шрифт Awesome not fill menu bar

В моей строке меню у меня есть значок поиска с использованием шрифта awesome. каждый элемент в строке меню заполняет его, но высота поиска составляет около 80-85% от его родительского. это мой HTML-кодШрифт Awesome not fill menu bar

<html> 
 

 
    <head> 
 
     <title>main page</title> 
 
     <link rel="stylesheet" href="styles.css"/> 
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"/> 
 
<style> 
 
body 
 
{ 
 
    margin:0px; 
 
    padding:0px; 
 
} 
 

 
ul 
 
{ 
 
    margin:0px; 
 
    padding:0px; 
 
    background-color:#CC6666; 
 
    overflow:hidden; 
 
    list-style-type:none; 
 
    font-size:18; 
 
    font-weight:bold; 
 
} 
 

 
li{float:right;} 
 

 
li a 
 
{ 
 
    display:inline-block; 
 
    display:inline-block; 
 
     text-decoration:none; 
 
     color:white; 
 
     text-align:center; 
 
     padding:12px 16px; 
 
     font-weight:400; 
 
     padding-right:15px; 
 
    } 
 
    li a:hover, .dropdown:hover .dropbtn{ 
 
     background-color:#666666; 
 
     margin:0px; 
 

 
    } 
 
    .active{ 
 
     background-color:#666666; 
 
    } 
 
    
 
.search{ 
 
    float:left; 
 
} 
 
</style> 
 
    </head> 
 
<body> 
 
    <div class="posi"> 
 
    <ul> 
 
    <li><a class="active" herf="home">خانه</a></li> 
 

 
    <li> 
 
     <a href="#">سوالات متداول</a> 
 
    </li> 
 

 
    <li> 
 
     <a href="#">عضویت در سایت</a> 
 
    </li> 
 
    <li> 
 
    <a herf="#">معرفی</a></li> 
 
    <li class="search"><a href="#"><i class="fa fa-search"></i></a></li> 
 
</ul> 
 
    </div> 
 
</html>

This is what I get

, как я могу это исправить?

источник

2017-02-14 Hanie Asemi

Отрегулируйте размер шрифта иконы таким образом, что он заполняет пространство, которое вы желание (попробуйте ~ 17px) – haxxxton

Я не получаю ваше требование. – Bhawna

Вы хотите уменьшить размер значка поиска ... – Prateek

Вы можете добавить:

line-height: 1;

li a

источник

2017-02-14 07:42:42

Спасибо. Но что такое линия-высота? И как это исправляет мою проблему? –

С сайта MDN: на элементах уровня блока свойство line-height определяет минимальную высоту строк строки внутри элемента. В вашем случае fot-awesome использует эту строку-высоту, и ваше поле не соответствовало этому. –

Я считаю, что это хром конкретной ошибкой, так как с сафари и светлячок там, кажется, не является проблемой. Если кто-либо еще может подтвердить это или опровергнуть это, пожалуйста, дайте мне знать. Я использую Chrome Версия 56.0.2924.87 (64-разрядная версия) В любом случае - здесь хромированной конкретного решения

// jQuery to add css class "chrome-fix" which changes height of ".search a" to 24 px instead of 22 px 
 
if (navigator.appVersion.indexOf("Chrome/") != -1) { 
 
$(".search a").addClass(".chrome-fix"); 
 
}

body 
 
{ 
 
    margin:0px; 
 
    padding:0px; 
 
} 
 

 
ul 
 
{ 
 
    margin:0px; 
 
    padding:0px; 
 
    background-color:#CC6666; 
 
    overflow:hidden; 
 
    list-style-type:none; 
 
    font-size:18px; 
 
    font-weight:bold; 
 
} 
 

 
li{float:right;} 
 

 
li a 
 
{ 
 
    display:inline-block; 
 
    display:inline-block; 
 
     text-decoration:none; 
 
     color:white; 
 
     text-align:center; 
 
     padding:12px 16px; 
 
     font-weight:400; 
 
     padding-right:15px; 
 
    } 
 
    li a:hover, .dropdown:hover .dropbtn{ 
 
     background-color:#666666; 
 
     margin:0px; 
 

 
    } 
 
    .active{ 
 
     background-color:#666666; 
 
    } 
 
    
 
.search{ 
 
    float:left; 
 
    height:41px; 
 
} 
 
.chrome-fix { 
 
    height:24px; 
 
}

<html> 
 

 
    <head> 
 
     <title>main page</title> 
 
     <link rel="stylesheet" href="styles.css"/> 
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"/> 
 

 
    </head> 
 
<body> 
 
    <div class="posi"> 
 
    <ul> 
 
    <li><a class="active" herf="home">خانه</a></li> 
 

 
    <li> 
 
     <a href="#">سوالات متداول</a> 
 
    </li> 
 

 
    <li> 
 
     <a href="#">عضویت در سایت</a> 
 
    </li> 
 
    <li> 
 
    <a herf="#">معرفی</a></li> 
 
    <li class="search"><a href="#" class="chrome-fix"><i class="fa fa-search"></i></a></li> 
 
</ul> 
 
    </div> 
 
</html>

источник

2017-02-14 08:00:07 Inkdot

спасибо, что было полезно –

ответ

Смежные вопросы