Icons on CERN Home webpage

Site building
1

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
2

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

3

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

4

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

5

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

Screenshot 2022-04-19 at 7.57.56 PM
Screenshot 2022-04-19 at 7.57.56 PM1824Ɨ1032 53.8 KB

  • 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.)

Screenshot 2022-04-19 at 7.56.08 PM
Screenshot 2022-04-19 at 7.56.08 PM1846Ɨ990 106 KB

I hope this resolves your query.

Regards,
Prakhar

6

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

7

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

8

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

9

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

10

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

11

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

12

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
13

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

14

Perfect! Thanks!
-cath