Icons do not work in conjunction with Bootstrap buttons

[jozilla]

Hi there,

I tried to use the academicons together with Bootstrap icons and buttons as follows:

[ Google Scholar](https://...){.ai-google-scholar .btn-primary .btn .btn-sm role="button"}

However, for some reason, this doesn't work, the icon doesn't properly load.

I also tried adding the .ai class as follows:

[ Google Scholar](https://...){.ai .ai-google-scholar .btn-primary .btn .btn-sm role="button"}

While that makes the icon load, it makes the button smaller than the default Bootstrap buttons, and changes the font:

It would be great if this can be made compatible with the default Bootstrap icons so I can use them on buttons, together with the existing Bootstrap social media icons.

[jozilla]

A similar issue I noticed is when using the same size (1.25rem or lg) with the Bootstrap icons and Academicons, they don't line up properly (not centered along the horizontal axis). Note how the Google Scholar and ORCID icons are a bit lower than the Bootstrap ones.

[{{< ai google-scholar-square title="Google Scholar" size="lg">}}](...) [{{< ai orcid title="ORCID" size="lg">}}](...) [{{< bi linkedin title="LinkedIn" size="1.25rem">}}](...) [{{< bi mastodon title="Mastodon" size="1.25rem">}}](...) [{{< bi twitter title="Twitter" size="1.25rem">}}](...)

It looks like this can be fixed by explicitly setting the font-size in CSS on the element that contains these icons (like a div): font-size: 1.2em -- but I assume that shouldn't be necessary?

[schochastics]

This is probably not satisfactory, but for the first issue, the solution seems to be

[ Google Scholar](https://...){.ai .ai-google-scholar .btn-primary .btn .btn-m role="button"} 
[ Linkedin](https://...){.bi .bi-linkedin .btn-primary .btn .btn-sm role="button"}

not the .btm-m vs .btm-sm

The bootstrap extension has a different approach to sizing icons. It is entirely done with style="font-size:x", while academicons uses the inbuilt latex sizing. I now implemented css like styling which you can do via size=1.25em let me know if it works better now (for me it seems to work)

[jozilla]

Thanks so much for your quick reply!

The suggestion for the first issue sort of works (the icon is now shown), but it still seems to change the font on the first button for me:

I also had to prefix "Google Scholar" and "LinkedIn" with   to have some spacing between the icon and text: [ Google Scholar](https://...){.ai .ai-google-scholar .btn-primary .btn .btn-m role="button"} [ Linkedin](https://...){.bi .bi-linkedin .btn-primary .btn .btn-sm role="button"}

Thanks for adding the ability to use CSS font styles for the second issue! It seems to make them more aligned. I thought at first there was still a difference in height between the Academicons and Bootstrap icons, but upon checking it seems to be just some extra vertical padding in the <i> elements of the Bootstrap icons:

Out of curiosity, would you instead suggest using Academicons together with LinkedIn/Mastodon/Twitter icons from FontAwesome? Are those more compatible?

[schochastics]

the first problem is really odd but could be something with the .ai class maybe? really not sure where this comes from. I remember having combined fa and ai somewhere and I did not notice any difference there, but I cannot say for sure. I think you could check out https://github.com/mcanouil/quarto-iconify which wraps iconify and that includes most if not all need icons in one library