Strange underlines when using <a>

[ulbrichdennis]

Hi!

First of all, I am sure this is not a bug. I just did not find a better category for my issue.

The problem is the following:

When using Academicicons as this:

<a href="https://arxiv.org/search/math?searchtype=author&query=Ulbrich,+D"><i class="ai ai-arxiv ai-4x"></i></a>
<a href="https://orcid.org/0000-0001-5541-011X"><i class="ai ai-orcid ai-4x"></i></a>
<a href="https://www.researchgate.net/profile/Dennis-Ulbrich-2"><i class="ai ai-researchgate ai-4x"></i></a>

the icons are underlined in a very strange way. Here is a screenshot:

I did a lot of Google searches and the usual advice is to make use of

a:link{
text-decoration: none !important;
}

Unfortunately, this does not resolve my problem.

Here are the CSS-sections which I am using and which could be of interest:

a:link, a:visited { color: inherit; }

a:link { text-decoration: none;
         background: -webkit-linear-gradient(#F7F9FB, #F7F9FB), -webkit-linear-gradient(#F7F9FB, #F7F9FB), -webkit-linear-gradient(#333, #333);
         background: linear-gradient(#F7F9FB, #F7F9FB), linear-gradient(#F7F9FB, #F7F9FB), linear-gradient(#333, #333);
         -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
         -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
         background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
         background-repeat: no-repeat, no-repeat, repeat-x;
         text-shadow: 0.03em 0 #F7F9FB, -0.03em 0 #F7F9FB, 0 0.03em #F7F9FB, 0 -0.03em #F7F9FB, 0.06em 0 #F7F9FB, -0.06em 0 #F7F9FB, 0.09em 0 #F7F9FB, -0.09em 0 #F7F9FB, 0.12em 0 #F7F9FB, -0.12em 0 #F7F9FB, 0.15em 0 #F7F9FB, -0.15em 0 #F7F9FB;
         background-position: 0% 93%, 100% 93%, 0% 93%; }

I would like to have the icons not to be underlined.

I am pretty sure that there is a simple way to overcome my issue. Do you have an idea?

I hope to have provided all necessary information.

Greetings!