CSS codes for fa-info icon

[crazycells]

Hi @phenomlab , how are you?

I have an info icon because of the glossary plugin, however, the icon is not at the place where I want it to be… I made it smaller with this code, however, I also want to change its position, I think I prefer it further above, on the upper right corner of the word. Do you know which codes should I use?

.glossary-wrapper {
    .fa-info {
        font-size: .500em;
    }
}

[phenomlab]

@crazycells hi. Can you supply your site url so I can have a look ? Either here or via PM if you’d prefer.

[phenomlab]

@crazycells Something like this would probably do it. Sadly, it requires position: absolute and you will need to play around with this to get the desired effect you are looking for, but it does work

.glossary-wrapper .fa-info {
    font-size: .5em;
    display: inline-block;
    position: absolute;
    margin-left: -5px;
}

[crazycells]

@phenomlab yes, thanks a lot. this works

[crazycells]

hi @phenomlab , I have a follow up question about the glossary plugin… is there any way to target the underlying “…” I want them smaller and maybe will change the color… I could not identify the specific class to target…

[phenomlab]

@crazycells You can find that here

.glossary-wrapper .glossary-word {
    text-decoration: underline;
    text-decoration-style: dotted;
}

Specifically, you want to either remove or change the text-decoration-style value

[crazycells]

@phenomlab thank you very much

[crazycells]

@phenomlab it looks like I am going with wavy… at least it does not interfere with the visibility of the word…

is there any way to target the wave line only, and not the word? I am trying to change the color of the wavy line, but the code changes the color of the word too…

[crazycells]

I have just figured it out…

it can be targeted with text-decoration-color:

I was mistakenly using color