creating own symbols and using it as font (icoMoon app)

amtenbrink

Hi,

there is a set of symbols symbols for people with special needs, for better understanding content of a webpage.

with ico moon app (https://icomoon.io/app) i tried to create a font out of it. it should be verx easy, it generates the font-files and css including @fontface rule.

but somehow it seems, that the fonts (numers?) are already occupied by other symbols.

Do you have an idea how to handle this?

Thanks!

page: https://lebenshilfe-he-wf.de/wohnen-test/

code:

@font-face {
  font-family: 'uksymbols';
  src:  url('fonts/uksymbols.eot?2vh1y8');
  src:  local('uksymbols'), local('uksymbols'),
        url('fonts/uksymbols.eot?2vh1y8#iefix') format('embedded-opentype'),
        url('fonts/uksymbols.ttf?2vh1y8') format('truetype'),
        url('fonts/uksymbols.woff?2vh1y8') format('woff'),
        url('fonts/uksymbols.svg?2vh1y8#uksymbols') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'uksymbols' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-uk-symbole-mo:before {
  content: "\e900";
}
.icon-uk-symbole-di:before {
  content: "\e901";
}
.icon-uk-symbole-mi .path1:before {
  content: "\e902";
  color: rgb(255, 255, 255);
}
.icon-uk-symbole-mi .path2:before {
  content: "\e903";
  margin-left: -1.21484375em;
  color: rgb(0, 0, 0);
}
.icon-uk-symbole-mi .path3:before {
  content: "\e904";
  margin-left: -1.21484375em;
  color: rgb(0, 0, 0);
}
.icon-uk-symbole-mi .path4:before {
  content: "\e905";
  margin-left: -1.21484375em;
  color: rgb(0, 0, 0);
}
.icon-uk-symbole-mi .path5:before {
  content: "\e906";
  margin-left: -1.21484375em;
  color: rgb(0, 0, 0);
}
.icon-uk-symbole-do:before {
  content: "\e907";
}
.icon-uk-symbole-fr:before {
  content: "\e908";
}
.icon-uk-symbole-sa:before {
  content: "\e909";
}
.icon-uk-symbole-so:before {
  content: "\e90a";
}

Pablo

Hello,

Sorry, but we do not know how this script works (icomoon) and we do not support them at all.

We know, that this is CSS code, and it should be pasted in the Theme Options > Custom CSS & JS >CSS, but if it won't work, we are not sure what can be the problem because we did not test the icomoon.

thanks

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

amtenbrink

ok, thanks anyway...