Support » Themes and Templates » Post Type Icons

  • Hello,

    I need some help with my Theme.
    My Site is running a Modified version of the Magzimum theme. Most I’ve changed Colors, and Backgrounds and some other CSS things, but Any changes I’ve made were solely in CSS, because I don’t know php.

    One of the things that the Sorbet theme has that I like is that it has these icons that appear that distinguish what type of post they are. (Post, Sticky, Aside, Video) So forth. I would like to add something similar to my theme but not as big as that.

    I’d like a small icon. (Preferably from Font Awesome) that will appear, to the left of the Post Title. Immediately to the left, and roughly the same size as the title. hell it could be in the same field if thats easy.

    I need to know what Codes need to be Written, and where they need to be placed to get this accomplished. 🙂

    Relative Links:
    My Site
    Sorbet Theme
    Magzimum Theme
    ,Font Awesome Library

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter robotmp6023

    (@robotmp6023)

    Since the Links didn’t work
    Relative Links:
    Magzimum Theme
    Sorbet Theme
    Font Awesome

    Thread Starter robotmp6023

    (@robotmp6023)

    bump

    Anyone able to help with this?

    The idea is to use CSS’s pseudo content. Try putting this in your Custom CSS. This is just for example, I tested the code with Magzimum Theme’s demo page via Firebug.

    .format-standard .entry-title a::before {
    	content: "s";
    	display: inline-block;
    	width: 1em; height: 1em;
    	margin-right: 8px;
    	text-align: center;
    	line-height: 0.7em;
    	color: red;
    	border: 2px solid red; border-radius: 2em;
    }

    This code will add a letter “s” along with some styling (circle around it) to the left of post title that is a standard post format.

    To apply this code to use font icon, we just need to add the font in via function or via a plugin (I believe we have this kind of plugin available, just check for it). Once we have the font, just add in font-family to the code and copy the font’s character that you want to use. And repeat the code for other post formats that your theme has.

    Thread Starter robotmp6023

    (@robotmp6023)

    Thanks Paul!

    After seeing the placement of the code you offered, I think I want to use that.

    but instead of the Text, just embed the standard WP icons for the corresponding post type. These

    Is there Default Code, for embedding those icons?

    IF you can write me up the code for one of the types, and then give me the “filename” or whatever for the others, I can figure that part out.

    we only really use the Default 6 types. (what I linked in the image).

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Post Type Icons’ is closed to new replies.