Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • November 29, 2023 at 9:45 pm #1426740
    dorisb123

    When I insert a line I can choose between some icons. I would like to add my icon in there, is that possible?

    November 30, 2023 at 3:33 am #1426750
    Ismael

    Hey dorisb123,

    Thank you for the inquiry.

    Are you referring to the Separator/Whitespace element? If yes, you can set the Horizontal Ruler Styling to Custom to be able to select a different icon.

    Best regards,
    Ismael

    November 30, 2023 at 5:42 pm #1426830
    dorisb123

    I did that and yes, I can select an icon, but I want to use one of own icon, is that possible?

    November 30, 2023 at 7:46 pm #1426842
    Mike

    Hi,
    I assume that you have not added your custom icon in the Enfold Theme Options ▸ Import/Export ▸ Iconfont Manager option, please see our documentation to create a icon font: Adding your own Fontello Icons.
    Otherwise you could use css to replace the icon with your custom icon that you uploaded into the media library.
    If you would like help with the css solution, please link to your icon and the hr line you want to replace the icon in so we can examine.

    Best regards,
    Mike

    November 30, 2023 at 9:48 pm #1426850
    Guenni007

    Or if it only affects a few icons and it is therefore not worth uploading your own font icon set, you can also swap the icon via a user class and using css.
    The advantage could then also be that multi-colored icons are possible.

    First case: you see a different html-entity f.e. here: https://www.toptal.com/designers/htmlarrows/
    then you can replace that content directly:
    my custom class is in this case: my-separator-icon

    #top .my-separator-icon .av-seperator-icon:before {
  content: "\00A7";
  font-size: 40px;
}

    next colored icons:
    my custom class is in this case: my-colored-separator-icon

    #top .my-colored-separator-icon .av-seperator-icon:before {
  content: "";
  display: inline-block; 
  position: relative;
  width: 40px;
  height: 40px;
  background: url(/wp-content/uploads/webers-globe1.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

    see: https://webers-testseite.de/separator-icons/

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.