web-dev-qa-db-fra.com

Ajouter une icône svg dans le bouton avec css / html?

Je veux que l'icône s'affiche à l'intérieur de la balise du bouton, voir le code ci-dessous:

#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;
}
<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>

Mais l'icône est juste affichée un peu partout, comment puis-je la faire tenir à l'intérieur du bouton?

htmlcsssvg
13
Mikael

Vous ne savez pas si le bouton n'est pas fermé ou si vous l'avez simplement copié ici et oublié de le fermer.

#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>
21
shadeed9

J'ai un peu modifié votre code et je l'ai mis à this fiddle.

Les deux problèmes étaient:

  1. Vous n'avez pas fermé votre button correctement, il doit se terminer après le SVG
  2. Vous devez spécifier une largeur pour le bouton (comme vous pouvez le voir, j'ai laissé certains de vos autres CSS)
2
JosephGarrone

J'ai vérifié votre code, veuillez essayer de le faire.

modèle de boîte (selon la taille, le poids, la marge, le rembourrage) seule raison.

<!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>
1
iyyappan

Je vous suggère de le faire de cette façon:

.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>
1
Pmpr