How to change the color of an icon when hovered over

What code do I add to this to make an icon change color, or change to a different color icon image when hovered over with the mouse?

i.pk-social-links-icon.pk-icon.pk-icon-twitter {
    content: url(yourimageurl.png) !important;
    width: 100px;
}

Solution

Since you don't have an SVG or a font based icon, you need to apply a filter (considering it's a true PNG and have no background). I recommend you to use this website (It converts hex colors to filter style).

For the hover, you need to add the same style name with ":hover" at the end, and inside that, put the filter. (or anything visual you want it to do), in this case I putted a filter that makes this color #de0d0d (kind of red).

i.pk-social-links-icon.pk-icon.pk-icon-twitter {
    content: url(yourimageurl.png) !important;
    width: 100px;
}
i.pk-social-links-icon.pk-icon.pk-icon-twitter:hover {
    filter: brightness(0) saturate(100%) invert(17%) sepia(44%) saturate(6167%) hue-rotate(356deg) brightness(103%) contrast(98%);
}