Icons on CERN Home webpage

We would like to use the icons on the footer block on the CERN home page.
The idea is re-use the icons with the possibility to change links, and/or add new icons.
How can I do this in an easy way?
Regards
Almudena

footer-block

1 Like

Dear Almudena,

The icons are contained in a special font which comes with the CERN Full HTML text format. Here you can see a full documentation how the characters are mapped with the icons. So you just have to choose the CERNIcons font in the form and type in the characters/icons you want.
Additionally they are linkable like a normal text.

Hope that helps!
Regards, Patrick

Hi - just to revive this topic, as I need these icons!

However I can’t figure out how to activate the CERNIcons font in the form.

I’ve got everything to do CERN Modules enabled, but the CERNIcons font doesn’t appear in the list of fonts available to me in a basic block, even with CERN Full HTML text format enabled.

The handy link referenced above no longer works and I’m not sure where to look for the list of what letter does what, and how to activate the font.

Thanks!
-cath

Update: I found the page that lists the letter/icon combo, the link has changed to this instead:

https://drupal-tools.web.cern.ch/docs/styling/cern-theme/cern-font

Just need to understand how to activate the font now… any hints welcome!
thx
-c

Hey,

You can find the CERN Fonts last on the list under the fonts in the editing window. Refer the screenshot that I have attached

  • In the font, search for CERN fonts or for any other font family you wish for

  • In order to use the CERN Font, you need to just expand the font selection and choose the icons font (it’s most of the times the last on the list.)

I hope this resolves your query.

Regards,
Prakhar

Hi Prakhar,

Thanks for the explanation. I have followed these steps, but I still don’t have the CERNIcons font in my list (nowhere, not even at the bottom). See screenshot:
Screenshot 2022-04-20 at 09.09.11

I’m using a Basic Block, I have activated every CERN module, I’m using CERN Full HTML as you can see but … nothing in the fonts list. Where can we go from here?

Thanks,
Cath

Hey Cath,

In order to have a close look to the issue can you share the url of your website ?

Thank you in advance.

Regards,
Prakhar

Sure - it’s https://openlab-cn-may.web.cern.ch

See the ‘Follow Us’ footer. I can call the font using <p style="font-family: CERNIcons, CernIcons, cern-icons;....

But I was expecting to be able to just use the font drop-down, rather than trying to ‘code’ it in (I’m not a programmer, so this took over 30 minutes to figure out how to make it work…)

Thanks,
-cath

Hey,

I am having a look into the settings. In the meantime you can use inline css to change the font size, family etc. In order to keep the work going for your website you can use the inline css for attaining the desired output.

In case you require any help with the styling using css, you may write us here.

Thank you for your patience.

Regads,
Prakhar

Hi Prakhar,

OK, thanks.

Could you let me know of some nice clean CSS styling for this? I’ve got the following:

<p style="font-family: CERNIcons, CernIcons, cern-icons; font-size:48px;"> <a href="https://twitter.com/cernopenlab">W </a> <a href="https://www.facebook.com/cernopenlab">v</a></p>

It works, but… I assume it’s probably not what a CSS pro would put… :slight_smile:

Thanks,
Cath

Hey,

I see that the inline css works well. You have done it correctly, generally we use the inline css to style our content on drupal using the source in there.

Your style tag works perfect :+1: .

Regards,
Prakhar

Great! Thanks! Nice to know my CSS is clean in this particular case, it’s normally a complete hacky mess :sweat_smile:

-cath

1 Like

Dear Cath

How to add fonts to the list on the CKEditor, GUI version
Go to: Home >> Administration>> Configuration>>> Content creation
(/admin/config/content/formats)

Click on “Configure” for “CERN Full HTML”.
search for "Font Configuration
paste the following

CERNIcons, CernIcons, cern-icons|CERN font
Arial, sans-serif|Arial
Courier, monospace|Courier New
Tahoma, sans-serif|Tahoma
Times, serif|Times New Roman
Trebuchet MS, sans-serif |Trebuchet MS
Verdana, sans-serif|Verdana

Save settings
Clear cache

Done!!!

Best regards
Guillermo

Perfect! Thanks!
-cath