Viewing 2 replies - 1 through 2 (of 2 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi, since you did not give a link to your site, I’ve had to go off of the Revelar demo site. The originals are Genericon font icons.

    This is the base for standard posts.

    .entry-format::before {
        background-color: #dde4e6;
        border-radius: 50%;
        color: #fff;
        content: '\f100';
        display: block;
        font-family: "Genericons";
        font-size: 34px;
        font-size: 3.4rem;
        padding: 0 .4em;
        text-shadow: 0 0 1px #aaa;
    }
    

    Then the following would be for the different post formats.

    .format-gallery .entry-format::before, .blog.home .hentry.format-gallery .entry-thumbnail.no-thumbnail::before {
        content: "\f103";
    }
    .format-quote .entry-format::before, .blog.home .hentry.format-quote .entry-thumbnail.no-thumbnail::before {
        content: "\f106";
    }
    .format-image .entry-format::before, .blog.home .hentry.format-image .entry-thumbnail.no-thumbnail::before {
        content: "\f102";
    }
    .format-link .entry-format::before, .blog.home .hentry.format-link .entry-thumbnail.no-thumbnail::before {
        content: "\f107";
    }
    .format-video .entry-format::before, .blog.home .hentry.format-video .entry-thumbnail.no-thumbnail::before {
        content: "\f104";
    }
    .format-aside .entry-format::before, .blog.home .hentry.format-aside .entry-thumbnail.no-thumbnail::before {
        content: "\f101";
    }
    

    If you are wanting to use images, you can add urls to the content declarations. See here for more information on that.

    On the sizes, if you are going to use images, I would suggest you keep them around about 36px square so that they will fit well in the existing icon circular background.

    Thread Starter dannydanny

    (@dannydanny)

    thanks so much for this! I REALLY appreciate it. I dug around for a bit but couldn’t find what I wanted. This helped me solve my issue quickly. THANK YOU. BTW, my site url is https://myboringchannel.com

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