« Web, HTML, Tech Forum

How do I make my contact icons appear next to the text instead of behind it?

Maximiliano (he/him)'s profile picture

Posted by Maximiliano (he/him)

posted

Forum: Web, HTML, Tech

View Topics View Profile

What my broken-ish contact section currently looks like

This is the layout I'm using as a base

For the contact icons I just wrote the following code at the bottom (I'm a bit scared of modifying the original code in case I'll break it lol):

<style>

.contact .inner a {

    display: inline-block;

    width: 25px;

    height: 25px;

    background-size: cover;

    background-repeat: no-repeat;

}


.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a {

    background-image: url("https://media.giphy.com/media/gngbH80U4aSPfXchEa/giphy.gif");

}


.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a {

    background-image: url("https://media.giphy.com/media/ecqgl2fm0kBVPs3fK9/giphy.gif");

}


.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a {

    background-image: url("https://media.giphy.com/media/I7aFIB1uCqgm6r248e/giphy.gif");

}


.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a {

    background-image: url("https://media.giphy.com/media/scTwJZP4nM8gQ7ZGSq/giphy.gif");

}


.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a {

    background-image: url("https://media.giphy.com/media/XAbFNhl3ctlIb5AJgm/giphy.gif");

}


.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a {

    background-image: url("https://media.giphy.com/media/yakEGttFKKBvr0NZdM/giphy.gif");

}


.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a {

    background-image: url("https://media.giphy.com/media/7MAtLqiOdJva8gWbH9/giphy.gif");

}


.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a {

    background-image: url("https://media.giphy.com/media/cXRF5fVj5FnJwOyfxX/giphy.gif");

}

</style>


Report Topic

1 Reply

Inccubus Fangzz's profile picture

Reply by Inccubus Fangzz

posted
updated

you're setting it as a background image to the texts, so that's why it's behind them
I would suggest resizing the images manually then putting them as a :before pseudo element

something like this (I resized them as 25x25, the size you were using in the first part of the code):


<style>



.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {


    content: url("https://media.giphy.com/media/J88sxCRBv5ePtexYeG/giphy.gif");


}




.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {


    content: url("https://media.giphy.com/media/CZy2ISJb164bgPdqsz/giphy.gif");


}




.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {


    content: url("https://media.giphy.com/media/Z6X3z3lq8qwHszbSDX/giphy.gif");


}




.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {


    content: url("https://media.giphy.com/media/20eicLfIlBsxBWnKmh/giphy.gif");


}




.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {


    content: url("https://media.giphy.com/media/XPJWc7whsAUOHMhGRy/giphy.gif");


}




.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {


    content: url("https://media.giphy.com/media/BwpgfBqMRvM2TBVncQ/giphy.gif");


}




.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {


    content: url("https://media.giphy.com/media/p2TGT4KoAQ4628NZjI/giphy.gif");


}




.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {


    content: url("https://media.giphy.com/media/xiWzvPN5iKBjrR8DMu/giphy.gif");


}


</style>




feel free to IM me if u need moar help!


Permalink Report Reply