use own svg icon in semantic ui input - HTML CSS SVG

HTML CSS examples for SVG:Path

  1. HOME
  2. HTML CSS
  3. SVG
  4. Path

Description

use own svg icon in semantic ui input

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css"> 
  <style id="compiled-css" type="text/css">

svg {<!--from   w  w w.  j  ava2s .c  o m-->
   height: 19px;
   width: 19px;
   margin-top: 9px;
}


      </style> 
 </head> 
 <body> 
  <!-- Link to SVG Version --> 
  <div class="ui left icon input"> 
   <input placeholder="Search users..." type="text"> 
   <i class="icon"> 
    <svg> 
     <use href="https://www.java2s.com/style/demo/Firefox.png"></use> 
    </svg> </i> 
  </div> 
  <!-- Inline Version --> 
  <div class="ui left icon input"> 
   <input placeholder="Search users..." type="text"> 
   <i class="icon"> 
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve"> 
     <g> 
      <path fill="dark gray" d="M963.1,833.6L704.8,575.3c0,0,0,0-6.1,0c30.7-61.5,49.2-123,49.2-190.6c0-202.9-166-368.9-368.9-368.9S10,181.8,10,384.7c0,202.9,166,368.9,368.9,368.9c67.6,0,135.3-18.4,190.6-55.3l0,0l258.2,258.2c36.9,36.9,92.2,36.9,129.1,0C999.9,925.8,999.9,870.5,963.1,833.6z M133,384.7c0-135.3,110.7-245.9,245.9-245.9c135.3,0,245.9,110.7,245.9,245.9c0,135.3-110.7,246-245.9,246C243.7,630.7,133,520,133,384.7z" /> 
     </g> 
    </svg> </i> 
  </div>  
 </body>
</html>

Related Tutorials