सीएसएस/एचटीएमएल के साथ बटन में svg आइकन जोड़ें?

मैं, बटन टैग के अंदर प्रदर्शित होने वाला आइकन है नीचे दिए गए कोड को देखना चाहते हैं:सीएसएस/एचटीएमएल के साथ बटन में 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

व्यक्तिगत रूप से मैं इसे डेटा-यूरी, पृष्ठभूमि-छवि के रूप में उपयोग करता हूं। इनलाइन बस ... अजीब लग रहा है? –

कृपया उत्तर देने पर विचार करें, यदि वे सहायक हैं, तो आपकी समस्याओं पर निवेश करने वाले समय और प्रयास का आभारी होना – 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 क्रोम में देखे गए व्यवहार) का उत्तराधिकारी होगा। माता-पिता की ऊंचाई के अतिरिक्त इसकी चौड़ाई और ऊंचाई निर्दिष्ट करने की आवश्यकता नहीं होनी चाहिए। जो भी आप svg की चौड़ाई और ऊंचाई होना चाहते हैं, उसके लिए पैरेंट चौड़ाई और ऊंचाई सेट करें। क्रोम में, एसवीजी स्तर पर चौड़ाई और ऊंचाई पूरी तरह से अनदेखा किया जा रहा है। –

आपको ओपनिंग बटन टैग में स्लैश को हटाने की भी आवश्यकता है। यह वर्तमान में आत्म बंद है। '<बटन आईडी =" खोज-बटन ">' – bpscott

मैं एक डाल अप this बेला पर अपने कोड थोड़ा संशोधित कर लिया है।

दो समस्याओं थे:

आप बंद नहीं किया अपने button ठीक से, यह के बाद समाप्त करने के लिए एसवीजी

आप (आप देख सकते हैं बटन के लिए एक चौड़ाई निर्दिष्ट करने की जरूरत की जरूरत है मैं अपने अन्य सीएसएस के कुछ)

स्रोत

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

सीएसएस/एचटीएमएल के साथ बटन में svg आइकन जोड़ें?

उत्तर

संबंधित मुद्दे