Jump to content

Trouble with coding Icons

Recommended Posts

 Hi! I have coded some icons that are supposed to go above some text that i have on my website. it is supposed to look like as in picture 1, with the icons and text aligning horizontally, which it does in EDIT mode. But, when in preview mode and the final site, it looks as in picture 2.

I added them using these HTML codes (starting from left):

<div style="text-align: center;">
  <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24"><path d="M15.787 7.531c-5.107 2.785-12.72 9.177-15.787 15.469h2.939c.819-2.021 2.522-4.536 3.851-5.902 8.386 3.747 17.21-2.775 17.21-11.343 0-1.535-.302-3.136-.92-4.755-2.347 3.119-5.647 1.052-10.851 1.625-7.657.844-11.162 6.797-8.764 11.54 3.506-3.415 9.523-6.38 12.322-6.634z"/></svg>
  <p> <strong><div style="color:black;">Hållbart producerad</p></div></strong>
<p>tryckt på miljömärkt FSC-certifierat papper</p>

<div style="text-align: center;">
  <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>
  <p><strong><div style="color:black;"</strong>Lokal produktion</p></div> </strong>
  <p>Tillverkat nära dig, on demand. Ingen överproduktion</p>

<div style="text-align: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
<p><strong><div style="color:black;">Hög kvalité</p></div></strong>
<p>Tryckt på bästa papper av museikvalité</p>

 

Any ideas on why this happens? Is it a bug or is my coding incorrect? I am very new to this hehe 🙂

Thanks

 

 

 

 

Skärmbild (11).png

Skärmbild (12).png

Link to comment
  • Replies 1
  • Views 248
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi,

Your code missing 3 closing div tags. It should be

<div style="text-align: center;">
  <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24"><path d="M15.787 7.531c-5.107 2.785-12.72 9.177-15.787 15.469h2.939c.819-2.021 2.522-4.536 3.851-5.902 8.386 3.747 17.21-2.775 17.21-11.343 0-1.535-.302-3.136-.92-4.755-2.347 3.119-5.647 1.052-10.851 1.625-7.657.844-11.162 6.797-8.764 11.54 3.506-3.415 9.523-6.38 12.322-6.634z"/></svg>
  <p> <strong><span style="color:black;">Hållbart producerad</span></strong></p>
<p>tryckt på miljömärkt FSC-certifierat papper</p>
</div>

<div style="text-align: center;">
  <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24"><path d="M12 0c-4.198 0-8 3.403-8 7.602 0 4.198 3.469 9.21 8 16.398 4.531-7.188 8-12.2 8-16.398 0-4.199-3.801-7.602-8-7.602zm0 11c-1.657 0-3-1.343-3-3s1.343-3 3-3 3 1.343 3 3-1.343 3-3 3z"/></svg>
  <p><strong><span style="color:black;">Lokal produktion</span></strong></p>
  <p>Tillverkat nära dig, on demand. Ingen överproduktion</p>
</div>
<div style="text-align: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z"/></svg>
  <p><strong><span style="color:black;">Hög kvalité</span></strong></p>
<p>Tryckt på bästa papper av museikvalité</p>
</div>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.