Ajouter svg icône de bouton en css/html?

Je veux avoir de l'icône affichée à l'intérieur de la balise button, voir code ci-dessous:

CSS:

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

HTML:

<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é partout, le lieu est vraiment grand, comment puis-je obtenir pour s'adapter à l'intérieur du bouton ?

De ce que je peux voir, le problème réside dans le fait que votre bouton de la balise est fermée avant que le svg même commence.
Personnellement, je préfère l'utiliser comme un data-uri, background-image. Inline juste ... un peu bizarre?
Veuillez considérer upvoting réponses, dans le cas où ils sont utiles, d'être reconnaissants du temps et de l'effort, les gens investissent sur vos problèmes

InformationsquelleAutor Mikael | 2015-12-21

19

Ne sais pas si le bouton n'est pas fermé ou tout simplement vous avez copié ici et j'ai oublié de le fermer.

CSS:
```
#search-button {
  width: 100px;
  height: 50px;
}
    
#search-button svg {
  width: 25px;
  height: 25px;
}
```
HTML:
```
<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>
```
- le svg héritera de la largeur de son parent (comportement observé dans Google Chrome). ne devrait pas être nécessaire de le spécifier la largeur et la hauteur en plus de la mère de la hauteur. définir le parent largeur et la hauteur de ce que vous voulez l'svg width et height de l'être. dans google Chrome, la largeur et la hauteur au svg niveau sont complètement ignorés.
- Vous devez également supprimer la barre oblique dans le bouton d'ouverture de la balise. Il est actuellement à fermeture automatique. <button id="search-button">
InformationsquelleAutor shadeed9
2

J'ai modifié ton code un peu une de la mettre à cette violon.

Les deux problèmes étaient les suivants:
1. Vous n'avez pas à proximité de votre button correctement, il a besoin pour mettre fin à après le SVG
2. Vous avez besoin de spécifier une largeur pour le bouton (Comme vous pouvez le voir j'ai laissé certains de vos autres CSS)
InformationsquelleAutor JosephGarrone

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

boîte-modèle(Selon la taille,le poids,margin,padding) 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>

InformationsquelleAutor iyyappan

Je vous suggère, faisant de cette façon:

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

HTML:

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

InformationsquelleAutor Pmpr

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

InformationsquelleAutor Bijal

Vous devez vous connecter pour publier un commentaire.