How to chose different genericons for different posts?

  • Resolved WinfriedH

    (@winfriedh)


    8 years ago

    Hello there dear Support Team,
    This is a query about genericon usage.
    I have Dyad 2 in use and have found that I can get different genericons when I chose different post templates.
    But: I can only chose between “Standard” and “Image”. So there’s either the genericon with the lines or the camera, and as “image2 the featured image appears in full width above the post. I would prefer to have the post layout like in “standard”.
    I can see from the theme demo (https://dyad2demo.wordpress.com/) that there must be more templates than “standard” and “image”. How can I activate these and how can I change the genericons (I would need e.g. a beer glass and some other different genericons, but the same layout like the “standard” post).
    My URL is https://hopfenschmecker.de/.
    Thank you very much in advance for your information.
    Have a splendid weekend.
    Cheers
    Winfried

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @winfriedh!

    The star icon you see on that demo is triggered by marking a post as a Sticky Post.

    In terms of using icons that aren’t displayed already by the theme, you could use CSS to choose a different genericon, but that won’t work for things like a beer glass.

    Genericons are a specific collection of blogging/website related icons. For a more varied collection of icons, you’ll probably need to transition to a different icon font, like Font Awesome.

    That collection has, for example, a beer mug: https://fontawesome.io/icon/beer/

    Here’s a link to another thread with the steps to set up FontAwesome.

    For that last part, the CSS, you’d want to use something like this:

    .posts .category-beer .entry-inner:before {
    font-family: 'FontAwesome';
    content: "\F0FC";
}

    The .category-beer and content are the parts you would change.

    In the above example, .category-beer targets posts that are in the beer category. You could target the differently by inspecting your page and choosing any of the classes that identify the posts you want to assign an icon to. You’ll find the classes on the <body>.

    Content is the value for the icon in question. Search the FontAwesome website for the icon you need. Locate the Unicode value, and swap it out in the CSS above.

    Let me know how you get on, or if you run into trouble!

    Thread Starter WinfriedH

    (@winfriedh)

    Hello there Chad,
    you are great! Thank you, that worked for the posts on my start page.
    I import the fontawesome from MaxCDN.

    Is there a possibility to do the same (by CSS) for the yellow icons in the single post?

    Thank you very much in advance.

    My pleasure! Sorry, I meant to include some example CSS for that as well.

    Give this a try:

    .is-singular .category-beer .entry-inner:before {
    font-family: 'FontAwesome';
    content: "\F0FC";
    width: 32px;
    margin-top: -17px;
}

    You might want to adjust the width to control the horizontal positioning, or the margin-top to change the vertical. Otherwise we could have put these both into the same style, but this way you can fine tune them separately.

    Thread Starter WinfriedH

    (@winfriedh)

    Hello there Chad,
    you are the greatest! Thank you, that does it!

    Thank you very much for your greta support and the theme which I love even more now.
    It’s rocking!

    Cheers
    Winfried

    Happy to help! ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to chose different genericons for different posts?’ is closed to new replies.