How to change page/post icon

  • I would like to change the icon of page, to different from my own font. Font I already installed and it works in content of pages, but how can I change Writr page icons?

    The icons in Writr are displayed with CSS code, using Genericons. They are linked form the classes in /css/genericons.css

    I am beginner.
    I know just a little about CSS coding, but once I linked Font file to html and css files.
    Can somebody tell me what is the easiest way to replace this icon from Genericicons to my own font that I already install to my WP?
    Is there a way to use existing code/files and just change their name of directory and file name (or something like this)?

    This topic is moved from https://www.ads-software.com/support/topic/how-to-remove-page-icon-and-a-few-other-tweaks?replies=7#post-7210512

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Kathryn Presner

    (@zoonini)

    The specific CSS you’ll need to make this modification depends on the new icon font you’re using, since the code will be specific to that font.

    Does the font supply instructions on how to map characters?

    Do you have a link to your site?

    What is the name of the icon font you’re using?

    Thread Starter wierzyn

    (@wierzyn)

    Hi Kathryn ??
    This is a link to my site https://wojtacki.pl (now it has only Polish language)
    Here you can see example of this font that is entered in place of buttons,https://wojtacki.pl/orkiestrowe2/

    This is a very simple font created by my friend, it has only a few signs/pictograms
    I’ve instaled this font using “Use Any Font” plugin https://www.ads-software.com/plugins/use-any-font/

    I’ve got few subpages on my site, I want to after stepping on each of them to show in a different icon (like a template provides, in the case of posts)

    Moderator Kathryn Presner

    (@zoonini)

    You can check out the post format styles in Writr’s Genericons stylesheet at /css/genericons.css, starting on line 59:

    /* Post formats */
.genericon-standard:before {        content: '\f100'; }
.genericon-aside:before {           content: '\f101'; }
.genericon-image:before {           content: '\f102'; }
.genericon-gallery:before {         content: '\f103'; }
.genericon-video:before {           content: '\f104'; }
.genericon-status:before {          content: '\f105'; }
.genericon-quote:before {           content: '\f106'; }
.genericon-link:before {            content: '\f107'; }
.genericon-chat:before {            content: '\f108'; }
.genericon-audio:before {           content: '\f109'; }

    Genericons work by having a character code mapped to each letter (icon) which gets added via CSS, as you see above.

    If your friend created a custom icon font, you’ll need to check with him about how the character mapping works, as that’s something pretty specific to what they’ve done.

    Good luck!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to change page/post icon’ is closed to new replies.