Dodaj ikonę svg do przycisku z css/html?

chcę mieć ikonę wyświetlaną w znaczniku przycisk, patrz poniższy kod:Dodaj ikonę svg do przycisku z css/html?

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

ale ikona jest wyświetlane wszędzie naprawdę wielki, jak mogę dostać to pasuje do wnętrza przycisku?

Źródło

2015-12-21 Mikael

Z tego co widzę, problem polega na tym, że tag przycisk jest zamknięte przed SVG zaczyna nawet. – JosephGarrone

Osobiście użyłbym go jako danych-uri, obrazu tła. Inline tylko ... wygląda dziwnie? –

Rozważ dodanie odpowiedzi, na wypadek, gdyby były pomocne, aby być wdzięcznym za poświęcony czas i wysiłek osób, które zainwestują w twoje problemy. – Trix

Nie jestem pewien, czy przycisk nie jest zamknięty, czy tylko skopiowałeś go tutaj i zapomniałeś go zamknąć.

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

Źródło

2015-12-21 10:33:25 shadeed9

svg odziedziczy szerokość swojego rodzica (zachowanie obserwowane w Google Chrome). nie należy określać jego szerokości i wysokości w dodatku do wysokości nadrzędnej. ustaw nadrzędną szerokość i wysokość na dowolną szerokość i wysokość svg. w przeglądarce Chrome szerokość i wysokość na poziomie svg są całkowicie ignorowane. –

Musisz również usunąć ukośnik w tagu otwierającego przycisku. Obecnie sam się zamyka. '' – bpscott

I zmodyfikowaniu kodu trochę umieścić go w this skrzypcach.

Dwa problemy były:

Nie zamknąć button prawidłowo, musi zakończyć po SVG
, co potrzebne, aby określić szerokość dla przycisku (Jak widać skończyłem niektóre z drugiej CSS)

Źródło

2015-12-21 10:33:34 JosephGarrone

-1

proponuję wam, robią to w ten sposób:

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

Źródło

2015-12-21 10:35:30 Trix

Sprawdziłem kod, plz spróbować to zrobić.

Model skrzynkowy (w zależności od wzrostu, masy, marginesu, wypełnienia) jest jedynym powodem.

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

Źródło

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

Źródło

2015-12-21 10:52:04 Bijal

Dodaj ikonę svg do przycisku z css/html?

Odpowiedz

Powiązane problemy