CMS Development

JoshCM
Colaborador

Icon Fields - How to target with CSS?

Hi There,

 

I've been trying to get a selectable icon field to work within my module based off this blog post:

https://designers.hubspot.com/blog/now-live-icon-fields-added-to-the-new-design-manager

 

I'm 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 not able to figure out how I should target this with css as my attempts haven't seemed to work.  Any ideas?

0 Me gusta
3 Respuestas 3
Anton
Experto reconocido | Partner nivel Diamond
Experto reconocido | Partner nivel Diamond

Icon Fields - How to target with CSS?

Hi @JoshCM

thanks for the article. Didn't knew about that.

I've did it like this:

- create a new module for the icon; here's my code:

 

<div class="row">
<div class="container">
<div class="span12">
{% icon name="{{ module.icon_field.name }}" style="{{ module.icon_field.type }}" unicode="{{ module.icon_field.unicode }}" %}
</div> </div> </div>

- select any icon in the widget settings

 

- save it with a name which you can find quickly

- open a page with flex columns(not nessesary but 'more user-friendly')

- add the module you've just created to the flex column

- click on preview

- enable the browser inspector (for Chrome, Firefox, Opera and Edge it's "STRG+Shift+i"/"CMD+Shift+i")

- click on the selector/inspector icon("arrow"/top-left of the inspector window)

- hover the icon with your mouse; it should look something like this:

hubspot icon.JPG

- the yellow highlighted section on the left is the icon class

 

.hs_cos_wrapper_type_icon{}

- you can add it to your CSS file

 

- also you can add 

 

.hs_cos_wrapper_type_icon svg{}

to the CSS and style the SVG

 

 

Info:

If tried to change the icon color but wasn't successful. I could add a background-color and different size options but noch the color.

 

 

a "better" alternative would be a complete custom icon module with one of those icon databases

- fontawesome 4.7(old but very popular)

- fontawesome 5.x(new, different source code, not compitabel with 4.7)

- Google Material Icons(never used them)

- Bootstrap2 Glyphicons(should be build in in HubSpot)

 

a possible module(fontawesome 4.7; other icon fonts should look similiar) could look like this:

 

<div class="row">
<div class="container">
<div class="span12">
<i class="fa fa-{{ widget.icon }}"></i>
</div>
</div>
</div>

 

just add a simple text widget(not rich-text) to the module and call it "icon".

 

If you haven't "installed" a icon font on your page, you'll need to add it. Simply paste the font-libary link to the <head>-tag of your website/Hub.

For fontawesome 4.7 it's:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

 

After you've placed it in the desired place of the page you can go to the fontawesome 4.7 cheatsheat and type in any name without the first "fa-"

 

For example:

you'll find 

fa-500px

as the first icon in the cheatsheet. To use it as an icon with the module you'll have to simply type in

500px

in the text-field of the module. 

 

 

hope that helps

 

regards,

Anton

 

Anton Bujanowski Signature
JoshCM
Colaborador

Icon Fields - How to target with CSS?

Hi Anton,

 

Thanks for all this information.  It's extremely helpful.  I was thinking about the 2nd method you mentioned as well, but thought it might be easier to have the icon picker for non-code savvy members of the team.  I think I might go that route and have the cheat sheet link in the help description for that field.

 

Thanks for all your help and info on this!

0 Me gusta
drbipes
Colaborador

Icon Fields - How to target with CSS?

I was able to solve this problem by using a span style and fill attribute.

 

<span style="fill: red;">{% icon name="{{ module.icon.name }}" set="fontawesome-5" style="solid" format="svg" width="64" height="64" %}</span>

Additionally I will replace "red" with a color picker snippet to look like this.

  <span style="fill: {{ module.icon_color.color }};">{% icon name="{{ module.icon.name }}" set="fontawesome-5" style="solid" format="svg" width="64" height="64" %}</span>

Feel free to ask any questions.  There may be a better way, this is what worked for me.