Is it possible to insert text near the icon?

[Ivan43Participant]

Hi. I followed your instructions to replace the .svg icon with some text with this code and it works perfectly. I just wanted to know if it was possible to add text next to the icon instead. Thanks.

(.prosettings {
width: auto! important;
}
.prosettings .innericon :: after {
content: ‘Category and Region’! important;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
font-size: 16px! important;
color: #ffffff;
line-height: 30px;
padding: 10px;
}
.prosettings .innericon svg {
display: none! important;
}

[Ernest MarcinkoKeymaster]

Hi,

Well, you can try using this feature: https://i.imgur.com/Xds6tTQ.png

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Ivan43Participant]

I apologize for my bad English. I wanted to ask if it was possible to add some text to the icon that I indicated in the screenshot. In practice I would like to have visible both the icon and a short text next to it

Attachments:

You must be logged in to view attached files.

[Ernest MarcinkoKeymaster]

Oh, I understand. Could be actually doable:

.prosettings, .prosettings .innericon {
    width: auto !important;
    white-space: nowrap;
}
.prosettings .innericon {
    display : flex;
    align-items : center;
    margin: 0 6px !important;
}
.prosettings .innericon::after {
    content: 'Category and Region'! important;
    white-space: nowrap;
    font-size: 16px! important;
    color: #ffffff;
    line-height: 50px;
    height: 100%;
    vertical-align: middle;
    margin: 0 6px 0 8px !important;
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Ivan43Participant]

It works perfectly. Thank you!

[Ernest MarcinkoKeymaster]

You cannot access this content. Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts