试图在我的按钮内放置一个图标字体答案

【问题标题】：trying to put an icon font Inside of my button试图在我的按钮内放置一个图标字体
【发布时间】：2014-03-31 00:48:42
【问题描述】：

我正在尝试在右侧的搜索输入中放置一个图标字体。

我将图标字体 <i class="fa fa-search-plus"></i> 放在我的 <button> 标记中，但图标字体出现在我的搜索输入的右侧，而不是右侧的输入内。

有人可以看到发生了什么吗？

我的问题是： 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; 

            }

【问题讨论】：

标签： html css

【解决方案1】：

图标不会出现在您的输入中，因为您的按钮不会也不能嵌套在输入中。

要让你的按钮出现在输入中，试试这个：

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

您可能需要调整边距和填充以使其正常工作。为了消除一些麻烦，我添加了盒子尺寸。为什么？

[默认]宽度和高度属性仅包括内容，但不包括边框、边距或内边距。

但是，当您使用边框框时，

宽度和高度属性包括内边距和边框，但不包括边距。

（参见 MDN 关于 box-sizing 的文章：https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing）

【讨论】：

【解决方案2】：

您只是没有正确链接到令人敬畏的字体 css 文件。这是我的 fiddle，它工作正常。

为了使它正常工作，我所做的只是通过将 http://www.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css 添加到外部资源来将其链接到 CDN。

【讨论】：

我认为 FontAwesome 只是在 Fiddle 中不起作用。我认为他希望图标出现在 inside 输入中。
您先生，说得对……我误解了他的意思。我想这只是一个巧合，font-awesome 对他不起作用。会支持你的答案。
谢谢！但我试图让我的图标在按钮内，而不是在右边！
@John23 哦，太好了！很高兴你明白了。

【解决方案3】：

在button 标签中添加一些height 和width 应该可以解决您的问题。然后制作一个图标为background-image。您可能不必在上面加上i 标签，请参阅我的Fiddle 使用input 标签和background-image 作为图标。

【讨论】：