Small icon in list - Support | Kriesi.at - Premium WordPress Themes

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
September 24, 2014 at 8:10 am #324079

creativeyes
Participant

Hi

I want to add a small ‘tick’ icon at the front of each bullet point on this page http://theimplantexperts.com/us/promise/. I’ve tried it using an icon box below but its all ended up too big.

September 24, 2014 at 2:56 pm #324300
Yigit
Keymaster
Hi Rupert!

Please add following code to Quick CSS in Enfold theme options under General styling tab
```
.page-id-49 .avia-icon-list .iconlist_icon {
height: 30px;
width: 30px;
line-height: 34px;
font-size: 14px; }
.page-id-49 .avia-icon-list .iconlist-timeline { left: 17px; }
```
Cheers!
Yigit
September 24, 2014 at 3:41 pm #324340

creativeyes
Participant

Thanks Yigit

I actually wanted to add the icons to the first batch of bullets and then delete the second batch. Alternatively I could delete the first batch but I’d then need to make the type in the second batch ‘paragraph’ text.

Many thanks

September 24, 2014 at 3:43 pm #324342

Yigit
Keymaster

Hey!

If you can post a screenshot showing the changes you would like to make we may provide you a better solution

Cheers!
Yigit

September 24, 2014 at 4:39 pm #324401

creativeyes
Participant

I’d like it to look something like this if possible
http://theimplantexperts.com/wp-content/uploads/2014/09/OurPromise_page.jpg

September 25, 2014 at 7:19 am #324819
Josue
Inactive Moderator
Hey!

Add this too:
```
.avia-icon-list li .iconlist_title {
    font-size: 12px;
    text-transform: none;
    font-weight: normal;
}
.avia-icon-list li {
    min-height: 40px;
}
```
Cheers!
Josue
September 26, 2014 at 4:24 pm #325672

creativeyes
Participant

Thanks Josue

I’ve got a display issue when viewed on a mobile http://theimplantexperts.com/wp-content/uploads/2014/09/Screen-Shot-2014-09-26-at-15.19.54.png

If possible I’d also like the points to be slightly closer together.

This is the code I have in at the moment:

}
.page-id-49 .avia-icon-list .iconlist_icon {
height: 30px;
width: 30px;
line-height: 24px;
font-size: 14px; }
.page-id-49 .avia-icon-list .iconlist-timeline { left: 17px; }
.avia-icon-list li .iconlist_title {
font-size: 14px;
text-transform: none;
font-weight: normal;
}
.avia-icon-list li {
min-height: 20px;
}

Many thanks

September 27, 2014 at 1:50 am #325824
Josue
Inactive Moderator
Hi!

Add this:
```
.page-id-49 .avia-icon-list li {
    padding-bottom: 20px;
}

.page-id-49 .avia-icon-list .iconlist_content_wrap {
    overflow: visible;
}
```
Best regards,
Josue
September 27, 2014 at 3:48 pm #325962

creativeyes
Participant

Many thanks, is it possible to align the third and fourth lines http://theimplantexperts.com/wp-content/uploads/2014/09/Screen-Shot-2014-09-27-at-14.46.30.png ?

September 27, 2014 at 10:19 pm #326029
Josue
Inactive Moderator
Hey!

Try adding a margin bottom to the iconlist_icon selector:
```
.page-id-49 .avia-icon-list .iconlist_icon {
height: 30px;
width: 30px;
line-height: 24px;
font-size: 14px; 
margin-bottom: 20px;
}
```
Regards,
Josue
September 27, 2014 at 10:41 pm #326033

creativeyes
Participant

Great many thanks

September 27, 2014 at 10:49 pm #326034

Josue
Inactive Moderator

You are welcome, always glad to help :)

Regards,
Josue
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Small icon in list’ is closed to new replies.