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
を終了する必要があります（あなたが見ることができるように私は、このようにそれをやって、私はあなたを示唆

出典

2015-12-21 10:33:34 JosephGarrone

-1

をあなたの他のCSSの一部をオフに左：

.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アイコンを追加しますか？

答えて

関連する問題