Return to previous page

Newsletter Icon - by rj - on WordPress WooCommerce support

This topic has 10 replies, 3 voices, and was last updated 5 years, 2 months ago ago by Olga Barlow

  • Avatar: FastFormations
    rj
    Participant
    September 17, 2020 at 12:43

    Hi

    Please tell me a way to change the icon of newsletter on header.
    https://prnt.sc/uivlk6
    I have only two options… to choose the default icon or to hide it… but I want to replace it with other icon

    #251682 Copied Theme version: 7.0.1
    9 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    September 17, 2020 at 13:24

    Hello,

    Unfortunately, we don’t have option to use the custom icon. Do you want some custom png image or FontAwesome icon to use there?

    Regards

    #251694 Copied
    Avatar: FastFormations
    rj
    Participant
    September 17, 2020 at 13:29

    Ya I want to replace it with custom png image or FontAwesome whichever is possible.

    #251696 Copied
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    September 17, 2020 at 15:49

    Hello,

    Then upload your custom png image to the media library and provide us with WP Dashboard access and we’ll try to add it using custom CSS.

    Regards

    #251720 Copied
    Avatar: FastFormations
    rj
    Participant
    September 26, 2020 at 13:44

    Ok Can you please help me changing below five icons on top header:

    Left Header:

    1. Default Youtube icon to this one:

    https://cindyscloset.ae/rent/wp-content/uploads/sites/2/2020/09/youtube-symbol.svg

    2. Default Pinterest icon to this one:

    https://cindyscloset.ae/rent/wp-content/uploads/sites/2/2020/09/pinterest-logo.svg

    3. Default Newsletter icon to this one:

    https://cindyscloset.ae/rent/wp-content/uploads/sites/2/2020/09/star.svg

    Right Header:

    4. Contact Icon to to this one:

    https://cindyscloset.ae/rent/wp-content/uploads/sites/2/2020/09/star.svg

    5. Help Center icon to this one:

    https://cindyscloset.ae/rent/wp-content/uploads/sites/2/2020/09/star.svg

    (last three are same icon, I will just change the URL later in the code)

    sorry I asked you for help as theme does not give me option to change these icons
    Thanks in advance.

    Please contact administrator
    for this information.
    #252858 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    September 27, 2020 at 15:03

    Hello,

    The next custom CSS code can be used:

    .et_b_header-socials a[data-tooltip="Youtube"] svg, 
.et_b_header-socials a[data-tooltip="Pinterest"] svg, 
.et_b_header-newsletter .et_b-icon svg {
    display: none;
}

.et_b_header-socials a[data-tooltip="Youtube"]:before,
.et_b_header-socials a[data-tooltip="Pinterest"]:before,
.et_b_header-newsletter .et_b-icon:before {
    content: '';
    width: 1em;
    height: 1em;
    display: block;
    background-size: 1em;
}

.et_b_header-socials a[data-tooltip="Youtube"]:before {
    background-image: url(https://cindyscloset.ae/rent/wp-content/uploads/sites/2/2020/09/youtube-symbol.svg);
}

.et_b_header-socials a[data-tooltip="Pinterest"]:before {
    background-image: url(https://cindyscloset.ae/rent/wp-content/uploads/sites/2/2020/09/pinterest-logo.svg);
}

.et_b_header-newsletter .et_b-icon:before {
    background-image: url(https://cindyscloset.ae/rent/wp-content/uploads/sites/2/2020/09/star.svg);
}

    tooltips can be changed depends on your needs in this code.
    Right bar icons – https://prnt.sc/uopr94

    Regards

    #252925 Copied
    Avatar: FastFormations
    rj
    Participant
    September 27, 2020 at 15:30

    Thanks! Regarding the tooltips, I want to use custom icons… so it would be great if you could give me a code to replace them as well.

    #252930 Copied
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    September 28, 2020 at 12:27

    Hello,

    Replace the background image in the previous code to what you need.

    Regards

    #252970 Copied
    Avatar: FastFormations
    rj
    Participant
    September 28, 2020 at 12:30

    Hi

    Previous code is not for tooltip icons (contacts widget)
    https://prnt.sc/uopr94

    #252972 Copied
    Avatar: Olga Barlow
    Olga Barlow
    Participant
    September 29, 2020 at 11:43

    Hello,

    You the following

    .et_b_header-contacts.et_element-top-level .contact-Contact svg,
.et_b_header-contacts.et_element-top-level .contact-Help svg,
.et_b_header-contacts.et_element-top-level .contact-Sell svg{
    display:none;
}
.et_b_header-contacts.et_element-top-level .contact-Contact:before,
.et_b_header-contacts.et_element-top-level .contact-Help:before,
.et_b_header-contacts.et_element-top-level .contact-Sell:before {
    content: '';
    width: 1em;
    height: 1em;
    display: block;
    background-size: 1em;
}
.et_b_header-contacts.et_element-top-level .contact-Contact:before {
    background-image: url(https://link to your image);
}

.et_b_header-contacts.et_element-top-level .contact-Help:before {
    background-image: url(https://link to your image);
}

.et_b_header-contacts.et_element-top-level .contact-Sell:before {
    background-image: url(https://link to your image);
}

    Regards

    #253096 Copied
  • Viewing 10 results - 1 through 10 (of 10 total)

The issue related to '‘Newsletter Icon’' has been successfully resolved, and the topic is now closed for further responses

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Hemp & CDB – WordPress WooCommerce Theme
lazy-placeholder
Kids Store – WooCommerce Theme
lazy-placeholder
Lawyer – WordPress WooCommerce Theme
lazy-placeholder
Cosmetics Store – WordPress WooCommerce Theme
lazy-placeholder
NFT Crypto Marketplace – WordPress WooCommerce Theme
lazy-placeholder
Poster – WooCommerce Theme
lazy-placeholder
Transport – WooCommerce Theme
lazy-placeholder
Application – WooCommerce Theme
lazy-placeholder
Gaming – WooCommerce Theme
lazy-placeholder
Niche Market 03 – Multivendor WP WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.