Custom Icons blank

so a bit offtopic: these font-icons are nice to have and a quick way to style buttons etc. with icons. You are alway resticted to monchrom usage.
So if you only have to work with some or – always the same icons you can replace the inserted icon from entypo-fontello by a png or svg – if you like.
give a custom-class to the container where you want to replace the icons. —- in my case it is : spezial-icon
CSS code is a bit different if you got chart or icons
here i replace that little bell icon – you find the code to insert on hovering the icon on the select field. you will find for the bell: \ue83d
erase the “u” in it. (by the way the backslash on mac keyboards is on shift+option+7 – on pc there is an extra key for it)
you have to look what you like to replace

.spezial-icon .av-icon-char[data-av_icon="\e83d"]::before, 
.spezial-icon .iconlist-char[data-av_icon="\e83d"]::before,
.spezial-icon .iconbox_icon[data-av_icon="\e83d"]::before {
    content: " ";
    display: inline-flex;
    width: 1.4em;
    height: 1.4em;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url("//the-path-to-your-image/image.svg");
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
}

.spezial-icon .av-icon-char[data-av_icon="/e83d"]::before {
    position: relative;
    top: 0 ;
    left: 0 ;
    transform: none;
}

the width and height is set by relative values to the font – so it is synchonized with the font-size of the entypo-fontello font icon.
Play a bit with these values.

• This reply was modified 5 years, 6 months ago by Guenni007.