« Web, HTML, Tech Forum

How to center an Online Icon (Help!) [closed]

Posted by kat ⛧

posted

Forum: Web, HTML, Tech

hiii ! so ive been trying to center my online icon for ages !! i simply cannot figure it out and if anyone would be so kind to help me I would really appreciate it T_T

I can center it if I remove the custom online icon, but id rather have my custom one. 



Report Topic

3 Replies

Sort Replies:

Reply by vance

posted

the reply i sent isn't showing up on my end so if it didn't post then...whoops! i sure hope the images i put in it didn't break it


Report Reply

Reply by vance

posted
updated

ok! i think the images i included in the first reply broke the post. so i'm going to try to do it again without them. anyways.

not sure if this is an issue you're still struggling with, and i'm not sure if this is what you were going for when you said you wanted it centered, but i fiddled around with this in my editor to see if i could do it! and i thiiiink i may have gotten somewhere?

i haven't tested it on mobile so i'm not sure how responsive it is.


there's a <style> element on line 722 or so, it's for the .online class and looks like this:


<style>
   
.online {
content: url(https://external-media.spacehey.net/media/sBGxjvVqSVPrOSsUpyb1OgHSuNHNg1uAsaEB6xDyhzZ4=/https://64.media.tumblr.com/d5a60b478de62a97c8d7da969e5cb6a3/11e36ea707fe8726-b3/s100x200/398d378b1c600315c8770bc1b57de0b9b70d660d.gifv);
}
</style>

within that element i added the highlighted lines, directly under the "content" portion after the semicolon:

<style>
   
.online {
content: url(https://external-media.spacehey.net/media/sBGxjvVqSVPrOSsUpyb1OgHSuNHNg1uAsaEB6xDyhzZ4=/https://64.media.tumblr.com/d5a60b478de62a97c8d7da969e5cb6a3/11e36ea707fe8726-b3/s100x200/398d378b1c600315c8770bc1b57de0b9b70d660d.gifv);

display:inline;
padding-inline: 1em;

}
</style>


on desktop, this seems to center the custom "online" icon with your profile photo on your page. not sure if this was what you were looking for but i figured i'd try!! i'm still a newbie when it comes to coding and web dev; if any more experienced developers see this and have  a better way to do this PLEASEEE let me know!!!!


Report Reply

Reply by kat ⛧

posted

HAHAH IT WORKED OH MY GODDDD THANK U SO MUCH <33333333



Report Reply

kat ⛧ closed this Forum Topic