product preview car using HTML and CSS

Community feedback

• 

  Vladimir•170

  @D0vl4Posted almost 2 years ago

  Hello Talluri Rahul 👋🏻

  To insert the .svg image, first you need to put the .svg icon in the project folder. After that you need to link it like this:

  <button id="submit" type="submit" value=""><img class="cart" src="./images/icon-cart.svg" alt="shopping-cart">Add to cart</button>

  As you can see, I solved the problem with the button tag which contains source for the icon (src="./images/icon-cart.svg").

  Later, you can style it in the CSS sheet.

  .cart { position: absolute; top: 36%; left: 28%; }

  Hope this helps. Happy coding! 😊

  1
• 

  Juan Galdino•50

  @juan-galdinoPosted almost 2 years ago

  I know two ways you can do this.

  On your button, you can simply put the svg code aside to text: (this approach has more code, but leave you free to style other propperties of the svg with css, like the icon color, background...)

  < button > < svg > < / svg > Add to Cart< / button>

  or

  You can put an < img /> tag and link to you svg file from outside (less code and not free to style the icon color) :

  < button > 
     < img  src="./images/icon-cart.svg" alt="Icon cart" />
     Add to Cart
   < / button>
  

  Hope this helps.

  1
• 

  Keven CB•200

  @kevcb1988Posted almost 2 years ago

  Hello to solve your question you can try the following. You can use the ::before pseduo class.

  Example: yourButton::before{ content: url("icon path"); margin-rigth: 16px; }

  PS: I had to use google translate because I don't know very much English, I hope it can help you.

  0