[newskywebsitesParticipant]

I’m sure this is a simple CSS fix, but I’ll be darned if I can find it. 🙁

I’m trying to make a horizontal list of services separated by a bullet. I thought using the icon shortcode would do the trick, but the circle icon is way too large. Your icon page says it’s easy to adjust the size and color of icons, but I’m new to coding and don’t know how.

Can you save me? Here is my code now. I’m using ellipsis for now until I can adjust the circle size…

Snowplowing [icon type=”ellipsis-h”] Salting and Sanding [icon type=”ellipsis-h”] Liquid De-Icing
Sidewalk Snow Removal [icon type=”ellipsis-h”] Snow Blowing

I’m using latest versions of everything and Integrity. Temp url is http://323.c72.myftpupload.com/

THANKS!
Dawn

[Nabeel AModerator]

Hi there,

Thanks for writing in!

To adjust the size and color of any icon, you can define inline CSS in the shortcode e.g you can do like this:

[icon type="ellipsis-h" style="font-size: 9px; color: orange;"]

You can do this for every icon you’re using on site.

Hope this helps!

[newskywebsitesParticipant]

I knew it was something easy like that but I couldn’t get it quite right. THANK YOU!!

[newskywebsitesParticipant]

Okay, I spoke a little too soon. That did work, and I liked the 9pt size for the circle icon, but it’s not centered vertically. It rests on the base line with the text. So it just looks like a large period, not a bullet separating a horizontal list.

Is there a better way to do this or some additional code that will force the circle icon to be centered on a line of text vertically?

THANKS!
Dawn

[Paul RModerator]

Hi Dawn,

You can change the code to this.

[icon type="ellipsis-h" style="font-size: 9px; color: orange; display:inline-block;vertical-align:middle;"]

If that doesn’t help can you provide url of the page where we could see the issue.

Thanks

[newskywebsitesParticipant]

PERFECT!! Thanks so much!!
Dawn

[FriechModerator]

Glad we could need,

Cheers!

[Tech4ElevenParticipant]

How are icons sized using only the icon element? I don’t see any options there.

[RupokMember]

Hello @tech4eleven

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

It would be better if you open a new ticket clarifying your problem.

Thanks

[Tech4ElevenParticipant]

i found it. i needed to turn on advanced controls and then i can enter in the style for the icons.

[FriechModerator]

Certainly, you can apply any CSS on the element style field. Glad you sorted things out, Cheers!

[Author]

Posts