image inputfield içinde gösterilmiyor

Bir dahili besleme ile bir navigasyon çubuğu oluşturmak istiyorum. Sağ tarafta (iç kısımda), bir cam göstermek istiyorum. Burada bu kodu vardır:image inputfield içinde gösterilmiyor

*{ 
 
\t margin: 0px; 
 
\t padding: 0px; 
 
} 
 

 
body{ 
 
\t background-color: rgb(226, 220, 220); 
 
} 
 

 
nav{ 
 
\t width: 100%; 
 
\t background-color: white; 
 
} 
 

 
nav > .nav_ul{ 
 
\t width: 1000px; 
 
\t margin: 0px auto; 
 
} 
 

 
nav > .nav_ul > .nav_li{ 
 
\t display: inline-block; 
 
\t margin: 10px 0px; 
 
} 
 

 
nav > .nav_ul > .nav_li > .nav_a{ 
 
\t text-decoration: none; 
 
\t padding: 7px; 
 
\t background-color: #5238DF; 
 
\t display: block; 
 
\t color: white; 
 
} 
 

 
nav > .nav_ul > .nav_search{ 
 
\t position: relative; 
 
\t display: inline-block; 
 
} 
 

 
nav > .nav_ul > .nav_search > .nav_searchfield{ 
 
\t padding: 7px; 
 
} 
 

 
nav > .nav_ul > .nav_search > .fa_search{ 
 
\t 
 
}

<!DOCTYPE> 
 
<html> 
 
\t <head> 
 
\t \t <link href="backbone/general.css" rel="stylesheet" type="text/css"/> 
 
\t \t <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 
\t </head> 
 

 
\t <body> 
 
\t \t <nav> 
 
\t \t \t <ul class="nav_ul"> 
 
\t \t \t \t <li class="nav_li"><a href="#" class="nav_a">Link 1</a></li> 
 
\t \t \t \t <li class="nav_li"><a href="#" class="nav_a">Link 2</a></li> 
 
\t \t \t \t <div class="nav_search"> 
 
\t \t \t \t \t <span class="fa fa-search"></span> 
 
\t \t \t \t \t <input class="nav_searchfield" type="text" placeholder="Search ..." /> 
 
\t \t \t \t </div> 
 
\t \t \t \t <li class="nav_li"><a href="#" class="nav_a">Link 3</a></li> 
 
\t \t \t </ul> 
 
\t \t </nav> 
 
\t </body> 
 
</html>

ben görüntü için fontawesome kullanır, ancak görüntü gösterilmez. Neyi yanlış yaptım? simge için özel bir marj Set

enter image description here

kaynak

2015-06-07 Name

[no üreme] (http://i.stack.imgur.com/yLS51 .png). Büyük olasılıkla tarayıcınız/OS/her ikisi de bu yazı tipini desteklemiyor. –

Bir resim ekledim ... localhost üzerinde sadece bu – Name

göremiyorum. Ve bu bir görüntü değil, bir unicode karakteri. –

Bu sorunu çözmek:

nav > .nav_ul > .nav_search > .nav_searchfield{ 
    padding: 7px 28px 7px 7px; 
} 

nav > .nav_ul > .nav_search > .fa-search{ 
    position: absolute; 
    top: 6px; 
    right: 10px; 
}

FIDDLE: https://jsfiddle.net/lmgonzalves/k433otdg/

kaynak

2015-06-07 13:21:09 lmgonzalves

Cevabınız için teşekkürler! Mükemmel. Ama hala camı göremiyorum. – Name

Kullanmak için font-awesome ile gelen stilleri eklemeniz gerekir. Örnek: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css – lmgonzalves

Şimdi çalışıyor! Teşekkürler! – Name

: İşte resimdir. .fa-margin { margin-left: -20px; }

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 
body { 
 
    background-color: rgb(226, 220, 220); 
 
} 
 
nav { 
 
    width: 100%; 
 
    background-color: white; 
 
} 
 
nav > .nav_ul { 
 
    width: 1000px; 
 
    margin: 0px auto; 
 
} 
 
nav > .nav_ul > .nav_li { 
 
    display: inline-block; 
 
    margin: 10px 0px; 
 
} 
 
nav > .nav_ul > .nav_li > .nav_a { 
 
    text-decoration: none; 
 
    padding: 7px; 
 
    background-color: #5238DF; 
 
    display: block; 
 
    color: white; 
 
} 
 
nav > .nav_ul > .nav_search { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: 0 5px; 
 
} 
 
nav > .nav_ul > .nav_search > .nav_searchfield { 
 
    padding: 7px; 
 
} 
 
nav > .nav_ul > .nav_search > .fa_search {} .fa-margin { 
 
    margin-left: -20px; 
 
}

<!DOCTYPE> 
 
<html> 
 

 
<head> 
 
    <link href="backbone/general.css" rel="stylesheet" type="text/css" /> 
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 
</head> 
 

 
<body> 
 
    <nav> 
 
    <ul class="nav_ul"> 
 
     <li class="nav_li"><a href="#" class="nav_a">Link 1</a> 
 
     </li> 
 
     <li class="nav_li"><a href="#" class="nav_a">Link 2</a> 
 
     </li> 
 
     <div class="nav_search"> 
 

 
     <input class="nav_searchfield" type="text" placeholder="Search ..."><span class="fa fa-search fa-margin"></span> 
 

 
     </div> 
 
     <li class="nav_li"><a href="#" class="nav_a">Link 3</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</body> 
 

 
</html>

kaynak

2015-06-07 13:19:29

Cevabınız için teşekkürler! – Name

image inputfield içinde gösterilmiyor

cevap

İlgili konular