Menu
I want to have the icon displayed inside the button tag, see code below:
#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>But the icon is just displayed all over the place really big one, how can i get it to fit inside the button ?
249
SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.
The simplest way to make a portion of an SVG clickable is to add an SVG hyperlink element to the markup. This is as easy as wrapping the target with an <a> tag, just as you would a nested html element. Your <a> tag can surround a simple shape or more complex paths. It can surround a group of SVG elements or just one.
We can use SVG in CSS via data URI, but without encoding it works only in Webkit based browsers. If encode SVG using encodeURIComponent() it will work everywhere. SVG must have attribute xmlns like this: xmlns='http: //www.w3.org/2000/svg' . If it doesn't exist, it will be added automagically.
You can embed SVG elements directly into your HTML pages.
Not sure if the button is not closed or just you copied it here and forgot to close it.
#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>I've modified your code a bit an put it up at this fiddle.
The two problems were:
button properly, it needs to end after the SVG
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
