試圖把一個圖標字體在我的按鈕內

我在<button>標記內放置圖標字體<i class="fa fa-search-plus"></i>，但圖標字體出現在搜索輸入的右側，而不是右側的輸入內。

有人可以看到發生了什麼？

我的jsfiddle的問題： http://jsfiddle.net/ritz/ZNb5r/（我嘗試鏈接「FONT-awesome.min.css」到的jsfiddle但我認爲它不工作）

我的HTML：

<li style="float:right; list-style:none; height:20px;"> 
    <form id="search"> 
     <input name="q" type="text" size="40" placeholder="Search..." /> 
     <button type="submit"><i class="fa fa-search-plus"></i></button> 
    </form> 
</li>

我的CSS：

#search 
     { 
       margin-top:8x; 
       margin-top:8px; 
       outline:none ; 
       border:none ; 
     } 


    #search input[type="text"] 
     { 
       border: 0 none; 
       font: 12px 'verdana'; 
       background: brown; 
       text-indent: 0; 
       width:110px; 
       padding: 6px 15px 6px 35px; 
       -webkit-border-radius: 20px; 
       -moz-border-radius: 20px; 
       border-radius: 20px; 
       text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
       -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
       -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
       box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
       -webkit-transition: all 0.7s ease 0s; 
       -moz-transition: all 0.7s ease 0s; 
       -o-transition: all 0.7s ease 0s; 
       transition: all 0.7s ease 0s; 
     } 

    #search input[type="text"]:focus 
      { 
       background: #141d22; 
       color: #fff; 
       width: 170px; 
       outline:none; 
       color:000; 
       -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; 
       -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; 
       box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; 
       text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 
      } 


    button[type="submit"]>i:hover 
      {  
       color: #fff; 

      } 

    button[type="submit"]>i 
      { 
       background:none; 
       color:#ccc; 
       font-size:1.5em; 

      }

來源

2014-03-31 John23

圖標不會出現在您的輸入內，因爲您的按鈕不是，也不能嵌套在輸入內。

爲了讓您的按鈕出現在裏面輸入，試試這個：

<style type="text/css"> 
    * { 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     box-sizing: border-box; 
    } 

    #search input[type="text"] { 
     padding-right: 20px; 
    } 

    #search button[type="submit"] { 
     margin-left: -20px; 
     width: 20px; 
    } 
</style>

您可能需要調整邊距和補得到它才能正常工作。爲了消除一些麻煩，我添加了框尺寸。爲什麼？

[默認]測量寬度和高度屬性，僅包括內容，但不包括邊框，邊距或填充。

當您使用邊界框，然而，

width和height屬性包括填充和邊界，而不是利潤率。

（見MDN對箱大小的文章：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing）

來源

2014-03-31 00:53:36 sheng

你就是不能鏈接到字體真棒CSS文件正確。這是我的fiddle與它正常工作。

爲了使其工作，我所做的只是將它與http://www.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css添加到外部資源鏈接到CDN。

來源

2014-03-31 00:55:54

我認爲FontAwesome只是沒有在小提琴中工作。我認爲他希望圖標出現在輸入內部。 – sheng

你先生，是對的......我誤解了他在說什麼。我想這只是一個巧合，字體真棒不適合他。會upvote你的答案。 –

謝謝！但我試圖讓我的圖標在按鈕內，而不是在右邊！ – John23

在button標記中放置一些height和width應該解決您的問題。然後製作一個圖標作爲background-image。您可能不需要在其上放置i標記，請使用input標記和background-image作爲圖標查看我的Fiddle。

來源

2014-03-31 16:03:35 vozaldi

試圖把一個圖標字體在我的按鈕內

回答

相關問題