« Web, HTML, Tech Forum

How do I change the icons from the contact box?

I saw that it can be changed but when I tried to costumize what happened was that the icon I choose was placed back at the site's ones,not to mention that they don't are separated in the code so the icon was in all of the options.How do I trully replace them? Can I put different icons in the options or only one?


Also,there's some way to change the second color from the navigation links from the header? (the color that the ul.links display when you put the cursor above them)
 


Report Topic

5 Replies

Sort Replies:

Reply by Tommy Panzram

posted
updated

This was actually new for me. I haven't tried to modify the icons before, I just nuked my entire contact box and built a new one from scratch lol. But, I've got you covered.


I took a look at the CSS on your page to get an idea of where you're currently at. So the information on how to replace the icons that you got missed one tiny detail: CSS cannot replace the src property of an element. Basically, what this means is we can't replace the default icons, but what we can do is remove them and add in new ones very easily! We just have to add one extra step to the CSS in your About Me and make one modification to your current selector.

Here's how we can acheive this:

1. Find the img.icons selector in your Style tag.
2. change "img.icons" to ".contact img.icons". This will ensure that we are only working with the icons in the contact box and nothing else on the page.
3. Remove every property you've defined in that selector (everything between the curly brackets under what is now ".contact img.icons")
4. With a clean slate add this: "display: none;" this will remove the current icons from the text box.
5. Underneath the .contact img.icons selector, lets create a new one. This is going to target the links inside of your contact box, then add something that comes before each link. In this case, we're adding your custom icons! Instead of going through the process of explaining each property I'm just going to paste what your final CSS should look like and you can ask me any questions you might have about how it works and I'd be happy to get back to you as soon as I can:

.contact img.icon { 
 display: none; 
}



.contact .f-col>a::before{ 
 content: " "; 
 display: inline-block; 
 width: 15px; 
 height: 15px; 
 background-image: url('https://cutekawaiiresources.files.wordpress.com/2016/11/cinnamoroll-bullet-3.gif?w=700&h='); 
 background-size: 100% 100%;


This last bit is optional, but if you'd like all the icons to line up on the left-hand side add this property: "float: left;"


Permalink Report Reply

Reply by ChocoLeite

posted

Thank you so much!!!! you are a lifesaver 


Permalink Report Reply

Reply by vriska

posted

this is sooo old but your a freaking life saver thank u!


Permalink Report Reply

Reply by franci ♱

posted

saving lifes rn, thank you bro <33


Permalink Report Reply

Reply by WildWorld

posted

Here's the code I'm using. The add friend icon can change if a user has a pending friend request with you, or if they're already your friend. This takes that into account and allows you to replace those specific icons.



.contact{
padding: 5px
}
.contact .f-col{
padding: 0px 0px 7px;
}

.contact .inner a {
display: flex; /* Enable flexbox for alignment */
}

.contact .inner a img {
margin-right: 4px; /* Space between icon and text */
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}

/* add to friends */
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a img[src*="add.png"] {
content: url('YourPathHere');
width: auto;
height: auto;
}

/* Pending friend request (hourglass icon) */
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a img[src*="hourglass.png"] {
content: url('YourPathHere');
width: auto;
height: auto;
}

/* Remove friend (delete icon) */
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a img[src*="delete.png"] {
content: url('YourPathHere');
width: auto;
height: auto;
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorites */
content: url('YourPathHere');
width: auto;
height: auto;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: url('YourPathHere');
width: auto;
height: auto;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* forward to friend */
content: url('YourPathHere');
width: auto;
height: auto;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url('YourPathHere');
width: auto;
height: auto;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url('YourPathHere');
width: auto;
height: auto;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add to group */
content: url('YourPathHere');
width: auto;
height: auto;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report user */
content: url('YourPathHere');
width: auto;
height: auto;
}


Permalink Report Reply