试图把一个图标字体在我的按钮内

我在<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

试图把一个图标字体在我的按钮内

回答

相关问题