Hola! ¡Tenemos nuestra Comunidad en Español!

Using the New Icon Fields

I saw this post about the new icon fields.

 

How do you add the new icon fields within a custom module in the design manager? For example, you can use

{{ widget.title_here }} 

to target specific fields - I tried placing it and I keep pulling this:

{name=user, unicode=f007, type=SOLID}

 I may be missing something, though. 

 

Any suggestions?

5 Replies
JoshCM
Occasional Contributor

Hi!

 

I submitted a support ticket regarding this and was able to get the icon to show up using this snippet:

 

{% icon
	name="{{ module.icon_field.name }}"
	style="{{ module.icon_field.type }}"
	unicode="{{ module.icon_field.unicode }}"
%}

However I'm still trying to figure out how to control the properties with css since for some reason it seems to ignore it.  Maybe I'm not targeting it correctly.

ipowell
Top Contributor

 Hi Josh!

 

Thanks, that helps a lot! I'm still trying to figure out how to control the properties as well. It pulls from the HubSpot library as as an svg - so customizing it is a little difficult because I can't get it to override the settings they have. 

 

I did find a way by using this code:

<i class="far fa-{{ module.icon_field.name }}" style="color: #{{ module.color_field.value }}; font-size: {{ module.font_size }}px;"></i>

Although, the issue is that it uses the font instead. (I attached the stylesheet for it) 

 

The font uses far, fas, fal and others to specify whether it is the regular, solid or light font. All of the icons in the HubSpot library are combined and it doesn't tell you which ones are regular etc. So unles you change the beginning: "far fa-{{ module.icon_field.name }}" to "fal fa-{{ module.icon_field.name }}" some of them won't show. 

 

It's a neat addition - I just wish they'd add some instructions that explained it better.

 

JoshCM
Occasional Contributor

Hey there!

 

I actually found out how to customize the icon with the help of Anton in this post:

https://community.hubspot.com/t5/Content-Design-Questions/Icon-Fields-How-to-target-with-CSS/m-p/209...

 

 One thing I noticed I was doing wrong was targeting the color rather than the "fill" for the svg icon color.

 

ipowell
Top Contributor

That's awesome! Thanks for the link.

 

I tried targeting the fill originally, but I think I had the wrong class for the icon when I did that, so I'm about to revise it. 

 

Thanks again!

JoshCM
Occasional Contributor

For sure!

 

I just posted my module in the share your work section as well with the html + css.

 

That might help as well.  Here's the link