search

Phlow / feeling-responsive

»Feeling Responsive« is a free flexible theme for Jekyll built on Foundation framework. You can use it for your company site, as a portfolio or as a blog.
http://phlow.github.io/feeling-responsive/
MIT License
894 stars 1.33k forks source link

Add custom icons for social_media.yml in footer #224

Closed DorienHuijser closed 3 years ago

DorienHuijser commented 3 years ago

Hi! I'm quite a newby to building websites and html, but I'm slowly giving it a try.

In the folder assets\fonts\svg-files-for-custom-font there are several .svg icons that can be displayed in the _footer.html. I have tried adding my own icons in .svg format and referring to them in socialmedia.yml, but this did not show the icons nor the links in the footer.

I think the problem is that these new icons need to be added to the font, except I do not know how, and I cannot find a simple explanation. Can anyone here help or refer me to some useful resources?

Concretely, I'd like to also add a link to my ORCID and therefore use the ORCID svg which I downloaded from here.

Phlow commented 3 years ago

Hello :) SVG is a image file format.

I build a font for the website and in the according folder you find the icons I used. If you need new icons you have to make your own fonts.

But nowadays – I made the theme a while ago ;) – I would embed the svg-files directly into the HTML-code and get rid of the font. Just add your svg files directly into the footer and adjust the sizes with CSS.

Adding vector graphics to the Web https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web

This helps a lot!

DorienHuijser commented 3 years ago

Ok I'll have a go with that, thank you for your quick reply! :)