Home Forums Weaver Xtreme Theme How to replace one genericon with another genericon character (not graphic)

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #65547
    MrWheeler
    Participant

    Hi Scrambler, or to whom it may concern, I was worried about posting too many requests until I read the invitations to ask more in the beta thread. 🙂

    It has been documented here in the forum and in a help page how to replace a genericon used by the Social Media part of Plus with a 32×32 graphic. I tried my best, but my best efforts just don’t look quite right as graphics. If you wish, you can see my graphics side by side with icons at stpeterregina.ca.

    My CSS is:

    .genericon-feed::before {content:””;display:block;width:32px;height:32px;background:url(https://stpeterregina.ca/wp-content/uploads/2020/09/email.png) center no-repeat;}

    I would like to replace one genericon character with another one. For instance, I would like to replace genericon-feed with genericon-comment and skip the graphic. Is this possible? Thanks in advance.

     

    #65553
    scrambler
    Moderator

    You are going to have to qualify “Don’t look quite right”

    I can see you envelope with @ sign as Icon before the text [email protected], if that is the one you are speaking of, it looks fine to me.

    What is the issue exactly?

     

    #65567
    MrWheeler
    Participant

    The two envelope icon-replacement graphics are about twice as big as the real genericons, that’s part of it. Another part is that even if I could shrink them down, the @ and the $ would be harder to read than they already are. They’re also vertically a pixel out of alignment with the others, I think. I agree this is all not a big deal, so if you’re busy, please feel free to ignore this thread or leave it until a rainy day.

    I think if CSS let me replace one genericon with another, so (for example) when the social icons Plus function goes to show genericon-feed, the genericon-comment character (as a font character) is given instead, that would be perfect.

    If something like this (adapted from above) could work with a little modification, I’d be set:

    .genericon-feed::{content:genericon-comment}

    I didn’t try that because I suppose my guess at a CSS line would almost surely be wrong and probably break something.

    #65569
    scrambler
    Moderator

    The icon above is 16px x 16px, so you would need to change you CSS to reflect that.

    .genericon-feed::before {content:””;display:block;width:16px;height:16px;background:url(https://stpeterregina.ca/wp-content/uploads/2020/09/email.png) center no-repeat;}

    But the position will be messed up because your icon image contains some white space around at at the bottom.

    You need to edit the icon file with an image editor and only keep the part with the envelope. Then you can use background positioning to fine tune the position, but center bottom should do it

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.