[Resolved] Adding Icon in sidebar Widget

Home Forums Support [Resolved] Adding Icon in sidebar Widget

Home Forums Support Adding Icon in sidebar Widget

  • This topic has 18 replies, 5 voices, and was last updated 2 months ago by Leo.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1873428
    ABCD

    HI,

    how to add icons before post titles in the sidebar (some ref in the snapshot).

    #1873432
    Leo
    Staff
    Customer Support

    Hi there,

    Can you link me to the example site and your site in question?

    The CSS is different depending on which kind of widget you are using.

    Let me know 🙂

    #1873442
    ABCD

    here it is.

    three widgets are there, refer to all in the sidebar (refer you may like, recent posts and nav bar).

    #1873560
    Ying
    Staff
    Customer Support

    Give this CSS a try, but the selector will be different for different widget, you’ll need to change them accordingly:

    .sidebar .widget:not(.zoom-social-icons-widget) ul li:before {
        content: "";
        background-image: url(your-icon-url);
        width: 20px;
        height: 20px;
        position: absolute;
        left: 0;
        top: 0;
    }
    
    .sidebar .widget:not(.zoom-social-icons-widget) ul li { 
        padding-left: 20px;
    }
    #1873752
    ABCD

    it’s not fitting properly as cropping icons and bottom border…see yourself in the URL.

    also the second selector which I use –

    .upw-posts article.post {
    :before

    but not applying seems.

    #1873783
    Elvin
    Staff
    Customer Support

    Hi there,

    The CSS you’ve added has a syntax issue. It has an extra { in between the selector and :before

    Try this instead.

    .upw-posts article.post {
        padding-left: 20px;
    }
    
    .upw-posts article.post:before {
        content: "";
        background-image: url(URL-to-icon.svg);
        width: 20px;
        height: 20px;
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        z-index: 1;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1873799
    ABCD

    HI,

    it’s not fitting properly as cropping icons and bottom border…

    what about this ??

    #1873809
    Elvin
    Staff
    Customer Support

    Change add background-size: contain; so the background automatically fits to th size of the pseudo element. 😀

    A wise man once said:
    "Have you cleared your cache?"

    #1873810
    ABCD

    only cropping removed but its stick to the title and padding applied to the bottom border as well…see here

    #1873833
    Elvin
    Staff
    Customer Support

    Are you aiming for something like this?

    If so, remove this:

    .upw-posts article.post {
        padding-left: 20px;
    }

    Add this:

    .upw-posts .post header a {
        margin-left: 30px;
        border: none !important;
    }
    
    .upw-posts .post header{
        border-bottom: 1px solid #ddd;
    }

    We basically transferred the bottom border to the header element instead of the link and then moved the actual link text to the right.

    A wise man once said:
    "Have you cleared your cache?"

    #1873841
    ABCD

    yes, you got it correct, just a small shift for the icon towards the bottom so that it can match height with title and not stick with a top borderline, how to do it??

    #1873852
    Elvin
    Staff
    Customer Support

    You can adjust the value of top: 0; to your preferred alignment.

    A wise man once said:
    "Have you cleared your cache?"

    #1873853
    ABCD

    hey,

    even when i update padding value “1” then its shifting below like i have given 10 value?? i just need to match height…

    another thing when I applied the same padding to the remaining two widgets, I messed up ..

    Did i use wrong class – ( .sidebar .post header a .widget:not(.zoom-social-icons-widget) ul li { )

    #1874457
    David
    Staff
    Customer Support

    Hi there,

    this CSS you have for the list item borders:

    .is-right-sidebar .widget:not(.zoom-social-icons-widget) ul li a {
        display: block;
        position: relative;
        padding: 5px 0 10px;
        border-bottom: 1px solid #ddd;
        color: #848484;
        font-size: 14px;
        font-family: Domine;
    }

    Change the padding to give it some left padding to accomodate the icon. ie. Change this line:

    padding: 5px 0 10px;

    to:

    padding: 5px 0 10px 25px;

    Then in this CSS, increase the top value to adjust the icon position:

    .sidebar .widget:not(.zoom-social-icons-widget) ul li::before {
        background-size: contain;
        content: "";
        background-image: url(https://[linked-removed]/wp-content/uploads/2021/07/IJ-side-logo-1-5.svg);
        width: 20px;
        height: 20px;
        position: absolute;
        left: 0;
        top: 5px; /* increase top value from 0 to 5px */
    }
    #1874745
    ABCD

    top: 10px; value i used.

    In Elvin CSS she gave z-index: 1; which is creating logo shadow but when I delete it, the icon becomes invisible ??

Viewing 15 posts - 1 through 15 (of 19 total)
  • The topic ‘Adding Icon in sidebar Widget’ is closed to new replies.