BioPAL / biopal.org

biopal website content repository
Apache License 2.0
1 stars 1 forks source link

[ENH] How to add icons to landing_page? #3

Closed slumnitz closed 3 years ago

slumnitz commented 3 years ago

How can I add a different icon to the landing page?

I.e. I would like to change the twitter icon in a blocks/feature by adding the 'fa-satellite' icon found here: https://fontawesome.com/icons/satellite?style=solid

{{% blocks/feature icon="fab fa-twitter" title="Discover the Science!" url="https://twitter.com/docsydocs" %}}
Discover the Science and scientific research behind BioPAL's algorithms.
{{% /blocks/feature %}}

Any tips @pmazzucchelli @francescobanda @emanuelegiorgi ?

pmazzucchelli commented 3 years ago

Hi @slumnitz , if you want to use an awesome icon, simply substitute its name in the icon clause: icon="fas fa-satellite" (you can find the correct name in the awesome icon web page)

If you want to add a new (external) icon or image in an .md file please look at the example in the (dummy) tutorial page content\en\docs\Tutorials\tutorial2.md

Always happy to help, Paolo

slumnitz commented 3 years ago

Hi @pmazzucchelli thank you, I tried just changing the name, see pr #4, it did not render on my computer. I wonder if there is a plugin or so we need to add to the template? Do you know if there is a list of supported icons? Else I might need to also upload the icons here.

pmazzucchelli commented 3 years ago

Hi @slumnitz ,

fab icon category is only for brands (e.g. twitter), so it's easy to recognize all icons. "fas - solid icons are usually filled with transparent outlines. far regular and fal light are similar. These icons are different than fas solid because they are mostly outlines and differ only in outline width. fal light icons have thinner outline compared to far regular." (copied from an answer in stackoverflow.com). I've substituted fas to fab in your code and they have correctly rendered on my computer.

slumnitz commented 3 years ago

Awesome, thank you!! Closing as resolved