We're merging with GenerateBlocks! Learn more here.

[Support request] How to add custom icon on blog archive?

Please login to receive premium support.

Support for the free plugin can be found here.

Home › Forums › Pro Support › How to add custom icon on blog archive?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 26, 2018 at 9:13 pm #6675
    Chao
    Participant

    Hi there

    I want to add date and author custom icon on blog archive?

    2018-11-27_12-03-45.png

    How to do this?

    Thanks

    November 27, 2018 at 5:30 pm #6687
    Tom
    Keymaster

    Hi there,

    You’d need to have that icon font uploaded to your child theme.

    Then you could do this:

    .wp-show-posts-author .author-name:before {
    font-family: Your Icon Font;
    content: "\icon code";
}

.wp-show-posts-entry-date:before {
    font-family: Your Icon Font;
    content: "\icon code";
}
    November 27, 2018 at 6:48 pm #6691
    Chao
    Participant

    Hi Tom

    If I want to use my image on the wp dashboard’s media.

    Is it right?

    
.wp-show-posts-author .author-name:before {
    font-family: Your Icon Font;
    content: <img src="img.jpg">;
}

.wp-show-posts-entry-date:before {
    font-family: Your Icon Font;
    content: <img src="img.jpg">;
}

    Thanks

    November 28, 2018 at 6:29 pm #6720
    Tom
    Keymaster

    If you want to use an image, you’d do this:

    content: url('URL TO IMAGE');

    November 28, 2018 at 8:44 pm #6724
    Chao
    Participant

    Hi Tom

    I successfully do it! Thanks

    http://wordpress-74103-670604.cloudwaysapps.com/news/

    But I have a few questions.

    (1) Is it possible to change the order between author and date? Currently it is author first and date second but I want to let date first and author second.

    (2) I want to let image fullwidth and the content area have margin. Is it possible? Currently, I saw I can’t tweak separately.

    (3) How to let pagination center ? Could you tell me which class?

    Thanks for your time.

    November 29, 2018 at 6:53 pm #6738
    Tom
    Keymaster

    1. Try this:

    .wp-show-posts-entry-meta {
    display: flex;
}

.wp-show-posts-posted-on {
    order: -1;
}

    2. This should do it:

    .wp-show-posts-inner > *:not(.wp-show-posts-image) {
    padding: 10px;
}

    3. Looks like you got it centered?

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