使用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圖標添加到按鈕中？

回答

相關問題