BlueOwlCreative » Topic: Icon to Replace Bullet in Accordian

Icon to Replace Bullet in Accordian

spyhop3 — Wed, 23 Dec 2015 23:15:19 +0000

Hi there -

On one page under an accordian tab, I would like my standard bullet to be replaced with an icon (icon-angle-double-right). I have but in this custom css on the page in order to get the alignment correct which is working:

.accordion_content li {
list-style-type: disc;
list-style-position: inside;
text-indent: -1em;
margin-left: 20px;
}

What do I need to do to replace my standard icon with the new icon?

Thanks, much.

Reply To: Icon to Replace Bullet in Accordian

BlueOwl — Sat, 26 Dec 2015 16:18:20 +0000

Hi again!

So you want this to take effect globally? May I see the URL in question please?
Sorry I am a bit confused.

Reply To: Icon to Replace Bullet in Accordian

spyhop3 — Wed, 06 Jan 2016 02:44:55 +0000

Here is the link, http://ssdp.whalewebtesting.com/ssdp-faq/

And yes, I think I do want the new bullet globally?

Thanks.

Reply To: Icon to Replace Bullet in Accordian

BlueOwl — Thu, 07 Jan 2016 11:13:28 +0000

Try this instead:

.accordion_content li {
    list-style-type: none;
}
.accordion_content li:before {
    content: "\f101";
    font-family: 'icomoon';
    speak: none;
    font-size: 1em;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #136f8d;
    margin-right: 6px;
    position: relative;
    left: -4px;
}

Reply To: Icon to Replace Bullet in Accordian

spyhop3 — Thu, 07 Jan 2016 18:34:37 +0000

Thanks. Looks great. One more question, what do you add to have the second line indent to match the first line, first word so it is all flush. I was trying:
text-indent: -1em; but didn’t seem to work?

Thanks.

Reply To: Icon to Replace Bullet in Accordian

BlueOwl — Mon, 11 Jan 2016 12:21:59 +0000

Try this:

.accordion_content li:before {
    content: "\f101";
    font-family: 'icomoon';
    speak: none;
    font-size: 1em;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #136f8d;
    margin-right: -8px;
    position: relative;
    left: -22px;
}