使用css/html将svg图标添加到按钮中？

我想有按钮标记内显示的图标，请参见下面的代码：使用css/html将svg图标添加到按钮中？

<div> 
<input type="search" id="header-search" placeholder="Search..." /> 
<button id="search-button" /> 
    <svg id="search-icon" class="search-icon" viewBox="0 0 24 24"> 
     <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/> 
     <path d="M0 0h24v24H0z" fill="none"/> 
    </svg>

#header-search { 
    width: 200px; 
    background: @header-color; 
    color: white; 
    font-size: 12pt; 
    border: 0px solid; 
    outline: 0; 
    vertical-align: -50%; 
} 

#header-search::-webkit-input-placeholder { 
    color: white; 
} 

#search-button { 
    background: #FFFFFF; 
    vertical-align: -50%; 
} 

.header-view-logo { 
    vertical-align: middle; 
} 

#search-icon { 
    fill:white; 
}

但仅仅是显示所有的地方真的很大一个图标，我怎样才能得到它适合在按钮内？

来源

2015-12-21 Mikael

从我所看到的，问题就在于，你的按钮标签被关闭SVG甚至开始之前。 – JosephGarrone

个人我会用它作为数据 - uri，背景图像。内联只是...看起来很奇怪？ –

请考虑向上投票的答案，以防他们有用，感谢人们投入您的问题的时间和精力 – Trix

不知道该按钮是不是关闭，或者只是您在这里复制它，忘记关闭它。

#search-button { 
 
    width: 100px; 
 
    height: 50px; 
 
} 
 
    
 
#search-button svg { 
 
    width: 25px; 
 
    height: 25px; 
 
}

<button id="search-button"> 
 
    <svg id="search-icon" class="search-icon" viewBox="0 0 24 24"> 
 
     <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/> 
 
     <path d="M0 0h24v24H0z" fill="none"/> 
 
    </svg> 
 
</button>

来源

2015-12-21 10:33:25 shadeed9

svg将继承其父项宽度（在Google Chrome中观察到的行为）。除了父高度之外，不需要指定它的宽度和高度。将父宽度和高度设置为您希望svg的宽度和高度为的任何值。在Chrome中，svg级别的宽度和高度正被完全忽略。 –

您还需要删除打开按钮标记中的斜杠。它目前是自动关闭的。 '

我修改您的代码有点把它挂在this小提琴。

的两个问题是：

你没有关闭button正确的，它需要后结束的SVG

你需要指定一个宽度为按钮（正如你所看到的我离开你的一些其他的CSS）

来源

2015-12-21 10:33:34 JosephGarrone

-1

我建议你，做这种方式：

.search > div, .search > button { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
#header-search{ 
 
    margin: 0; 
 
    line-height: 0; 
 
} 
 
#search-button svg { 
 
    width: 12px; 
 
    height: 12px; 
 
}

<div class="search"> 
 
    <input id="header-search" type="search" placeholder="Search..." /> 
 
    <button id="search-button"> 
 
     <svg id="search-icon" class="search-icon" viewBox="0 0 24 24"> 
 
      <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/> 
 
      <path d="M0 0h24v24H0z" fill="none"/> 
 
     </svg> 
 
    </button> 
 
</div>

来源

2015-12-21 10:35:30 Trix

我检查你的代码，PLZ尝试这样做。

箱模型（取决于高度，重量，边距，填充）只有原因。

<!DOCTYPE html> 
<html> 
<head> 


<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 

<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <style type="text/css"> 

    #header-search { 
    border: 1px solid #eee; 
    color: black; 
    float: left; 
    font-size: 12pt; 
    height: 40px; 
    margin: 0; 
    outline: 0 none; 
    padding: 0 10px; 
    vertical-align: top; 
    width: 200px; 
} 

#header-search::-webkit-input-placeholder { 
    color: white; 
} 

#search-button { 
    background-color: red !important; 
    height: 40px; 
    margin: 0 auto !important; 
    padding: 0; 
    width: 40px; 
} 
.header-view-logo { 
    vertical-align: middle; 
} 

#search-icon { 
    fill:white; 
} 
    </style> 

</head> 
<body> 
    <div> 
<input type="search" id="header-search" placeholder="Search..." /> 
<button id="search-button"> 
<svg id="search-icon" class="search-icon" viewBox="0 0 24 24"> 
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"> 
<path fill="none" d="M0 0h24v24H0z"> 
</svg> 
</button> 

</body> 

</html>

来源

2015-12-21 10:46:33 iyyappan

-1

<svg height="20" width="40" > 
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>

来源

2015-12-21 10:52:04 Bijal

使用css/html将svg图标添加到按钮中？

回答

相关问题