Adding Icon in sidebar Widget

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 :)

here it is.

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

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;
}

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.

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;
}

HI,

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

what about this ??

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

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

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.

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??

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

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 { )

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 */
}

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 ??