Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • July 22, 2019 at 2:54 pm #1120856
    vincentjamin

    Hello,
    I have been trying this for a few days but I can’t find a solution. Maybe someone can help me…
    I am working on this website : https://hellobijoute.com/
    My client asked me to use .svg files made by him as social icons.
    So i chose to use an HTML widget in the header of the website :

    		<a href="https://hellobijoute.com/contact/">
			<img alt="contact" src="https://hellobijoute.com/wp-content/uploads/2019/07/CONTACT.svg" />
		</a>

    Then i used this to make the icon appear on the right part of the header : 

    
#custom_html-4
{
 position: absolute;
    top: 15%;
right:10%;
	transform: translate(55%, -45%);
    z-index: 999;
}

    Now i have two issues :
    -1-
    It does the job when i open the page on Firefox.
    But on Chrome it dosen’t show the picture. On Edge it show a bigger picture.

    -2-
    When i try to add another picture (to have a second link to another page, Instgram actually) the pictures are displayed on top of one another or not at all.

    Could someone help me please ?

    • This topic was modified 5 years, 7 months ago by vincentjamin.
    July 23, 2019 at 6:09 am #1121095
    Ismael

    Hey Vincent,

    Thank you for using Enfold.

    You should define the width and height of the svg image using css or add the size attributes directly in its markup. Something like this should work:

    #custom_html-4 svg {
    width: 200px;
    height: 200px;
}

    Best regards,
    Ismael

    July 23, 2019 at 12:31 pm #1121175
    vincentjamin

    Thank you Ismael :)
    Finally I didi this and it did the job :

    <a style="float:left; width:50px;" title="Contact" href="https://hellobijoute.com/contact/">
			<img alt="contact" title="Contact"  src="https://hellobijoute.com/wp-content/uploads/2019/07/CONTACT-opti.svg">
		</a>
    July 23, 2019 at 10:34 pm #1121290
    Basilis

    Hi,

    Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Please bookmark Enfold Documentation for future reference.
    Thank you for using Enfold :)

    Best regards,
    Basilis

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Issues while trying to replace social icons by .svg files’ is closed to new replies.