Icon Adjustment in Icon List Item

[derekbritton]

Hello,

I’m attempting to recreate this look for ‘bullets’ using an Icon List:

I’ve been able to achieve this:

But you can see that it’s not the same style. I used the minus icon with align-bottom (I’ve also tried text-bottom - but that didn’t work well either)… but the minus doesn’t align exactly with the bottom of the text, and the weight is too thick.

Can you help me figure out the desired design? Is there any way to use a custom icon as an Item List icon? Or use just a simple underscore?

Here’s the page:
http://hauswirth.co/gigs/associate-201712

[jade]

Hi there,

Try adding a 3px bottom margin to .icon-bullet i.

Hope this helps.

[derekbritton]

Thank you - that helped with the alignment.

Is there any way to reduce the weight (stroke) of the minus icon?

[Prasant]

Hello @derekbritton,

Please try adding following CSS under X > Launch > Options > CSS:

i.x-icon-minus {font-weight: normal;}

Thanks.

[derekbritton]

Unfortunately that doesn’t do anything to adjust the weight of the minus icon.

Is it possible to use a custom icon for an Icon List? Or simply a character like an underscore “_”?

[friech]

Hi There,

In that case, please write your list in a plain HTML:

e.g.

<ul class="icon-bullet">
	<li>Execute and manage creative, online content development</li>
	<li>Copywriting in support of paid and organic social media campaigns</li>
	<li>Identify, document, and engage influencer relationships in internet communities and blogs to generate brand exposure, interaction and leads for assigned clients</li>
	<li>Stay on top of digital and social media trends and best practices</li>
	<li>Manage content calendar and asset development</li>
	<li>Utilize native and third-party social media tools for monitoring, reporting, and publishing on Facebook, Twitter, YouTube, Instagram, Snapchat, etc.</li>
</ul>

You can place it on a RAW Content element.

And then add this to Theme Options > CSS or Page CSS

ul.icon-bullet {
	list-style: none;
    margin-left: 0;
}

ul.icon-bullet li:before {
	content: '_';
}

Hope it helps,
Cheers!