Hi - I’m trying to get an icon (in this case in the callout module but need to apply generally to site as well) with a transparent background and circular border like this:
Could you please provide some guidance on child theme css required (note - as this will also be default icon style for site want avoid editors having to add a class to each instance so need css to over-ride default icon styling)?
Generally speaking, this wouldn’t necessarily be a case of CSS use, but image manipulation. You’ll want to create your icon images as needed as pngs in your preferred image editing program and then upload them to be used in the callout module. Let me know if that helps or if I am missing something here.
Hi Billy - understand what you’re saying but avoid images as icons (need svg / iconfont for best results on high density displays / scaling etc etc). Must have been a couple of years since I wrestled sprites. So trying to achieve this with an icon (rather than an image) and a border - I think it’s going to need some js for non fixed width / height and border radius unfortunately.
Can you show us a page where that icon is in place? Should be possible by setting a border and setting border-radius to 100%. But like Billy said, your best bet is to just include the border on your image.
I just checked your site and sorry to say but I don’t think there’s an easy way to achieve this. The icons will not always be square. So one way around it is to specify a width/height for your fa wrapper. But then, you have different sizes for your icons. The android icons on the footer will have a large wrapper, i.e., a big circle around a small icon.
Also, there’s no way to select an image with a transparent background via CSS. The best way around this would be to just create your own icons with the borders.