Is it possible to insert text near the icon?

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Is it possible to insert text near the icon?

This topic contains 5 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 6 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #35458
    Ivan43
    Ivan43
    Participant

    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;
    }

    #35468
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #35471
    Ivan43
    Ivan43
    Participant

    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.
    #35475
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #35476
    Ivan43
    Ivan43
    Participant

    It works perfectly. Thank you!

    #35477
    Ernest Marcinko
    Ernest Marcinko
    Keymaster
    You cannot access this content. Best,
    Ernest Marcinko

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


Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.