make the svg icon in an 'a' tag on the left part and the text stay middle - HTML CSS SVG

HTML CSS examples for SVG:Text

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

Description

make the svg icon in an 'a' tag on the left part and the text stay middle

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.again {<!--  ww w .j a  v  a 2s .  com-->
   display: block;
   width: 65%;
   margin: 55px auto 0;
   padding: 10px 5px;
   text-decoration: none;
   border: 1px solid #bbb;
   color: #333;
   text-align:center;
   position: relative;
}
.icon {
   position: absolute;
   left: 10px;
   top: 6px;
}


      </style> 
 </head> 
 <body> 
  <a href="http://www.example.com" title="example" class="again"> 
   <svg xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewbox="0 0 20 24" class="icon"> 
    <path style="fill=#339966" d="M 17.1 6.75Q 16.035.614.8 5 12.63.8 10 3.8L 10 0 1.75 4.95 1.8 5 10 10 10 6.2Q 11.6 6.2 12.9 6.75 14.25 7.35 15.4 8.45 17.2 10.3 17.55 12.8 17.6 13.3 17.6 13.85 17.6 17 15.4 19.2 13.15 21.45 10 21.45 6.85 21.45 4.65 19.2 2.4 17 2.4 13.85L 0 13.85Q 0 18 2.95 20.9 5.85 23.85 10 23.85 12.65 23.85 14.8 22.65 16 22 17.1 20.9 17.7 20.3 18.15 19.65 20 17.1 20 13.85 20 13.4 19.95 12.95 19.7 9.5 17.3 6.95 17.2 6.85 17.1 6.75 Z"></path> 
   </svg> Retry </a>  
 </body>
</html>

Related Tutorials