Solução para ícones Icomoon no Wordpress

r0y · 08/01/2017

Saludos tengo un pequeño inconveniente con los iconos de Icomoon sucede esto

Alguien que haya usado estos iconos que pueda ayudarme, ya agregue el código de iconos pero aun salen asi

Alexk · 08/01/2017

Creo que si no pones el código no te pueden ayudar :encouragement:

r0y · 08/01/2017

Alexk disse:
Creo que si no pones el código no te pueden ayudar :encouragement:

Pues en la web de Icomoon cuando generas un Icono te dan este codigo Ejemplo
.icon-display:before {
content: "\e956";
}
Esto va pegado en la la hoja Style de los iconos que es esta

HTML:

@font-face{font-family:'icomoon';src:url('fonts/icomoon.eot?xqy4ff');src:url('fonts/icomoon.eot?xqy4ff#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?xqy4ff') format('truetype'), url('fonts/icomoon.woff?xqy4ff') format('woff'), url('fonts/icomoon.svg?xqy4ff#icomoon') format('svg');font-weight:normal;font-style:normal}[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-pinterest:before{content:"\e900"}.icon-megaphone:before{content:"\e655"}.icon-user:before{content:"\e656"}.icon-warning2:before{content:"\e61d"}.icon-chevron-down3:before{content:"\e61e"}.icon-chevron-left3:before{content:"\e61f"}.icon-chevron-right3:before{content:"\e620"}.icon-display:before {
  content: "\e956"
}.icon-chevron-small-down:before{content:"\e621"}.icon-chevron-small-left:before{content:"\e622"}.icon-chevron-small-right:before{content:"\e623"}.icon-chevron-small-up:before{content:"\e624"}.icon-chevron-thin-down:before{content:"\e625"}.icon-chevron-thin-left:before{content:"\e626"}.icon-chevron-thin-right:before{content:"\e627"}.icon-chevron-thin-up:before{content:"\e628"}.icon-controller-play:before{content:"\e629"}.icon-controller-record:before{content:"\e648"}.icon-dots-three-horizontal:before{content:"\e649"}.icon-triangle-down2:before{content:"\e62a"}.icon-triangle-left2:before{content:"\e62b"}.icon-triangle-right2:before{content:"\e62c"}.icon-triangle-up2:before{content:"\e62d"}.icon-camera2:before{content:"\e62e"}.icon-check3:before{content:"\e64a"}.icon-circle-with-cross:before{content:"\e64b"}.icon-circle-with-minus:before{content:"\e64c"}.icon-circle-with-plus:before{content:"\e64d"}.icon-circle2:before{content:"\e64e"}.icon-cross2:before{content:"\e64f"}.icon-eye3:before{content:"\e651"}.icon-grid2:before{content:"\e62f"}.icon-home:before{content:"\e652"}.icon-info-with-circle:before{content:"\e630"}.icon-info2:before{content:"\e631"}.icon-light-up:before{content:"\e632"}.icon-magnifying-glass:before{content:"\e633"}.icon-mail:before{content:"\e634"}.icon-menu5:before{content:"\e635"}.icon-network:before{content:"\e636"}.icon-new:before{content:"\e637"}.icon-pencil:before{content:"\e638"}.icon-squared-cross:before{content:"\e639"}.icon-star:before{content:"\e653"}.icon-sweden:before{content:"\e63a"}.icon-vk:before{content:"\e63b"}.icon-flickr:before{content:"\e654"}.icon-google:before{content:"\e63c"}.icon-twitter3:before{content:"\e63d"}.icon-menu52:before{content:"\e659"}.icon-film:before{content:"\e600"}.icon-checkmark:before{content:"\e601"}.icon-checkmark2:before{content:"\e602"}.icon-cancel:before{content:"\e603"}.icon-cancel2:before{content:"\e604"}.icon-plus:before{content:"\e605"}.icon-plus2:before{content:"\e606"}.icon-minus2:before{content:"\e607"}.icon-minus3:before{content:"\e608"}.icon-notice:before{content:"\e609"}.icon-notice2:before{content:"\e60a"}.icon-cog:before{content:"\e60b"}.icon-time:before{content:"\e643"}.icon-checkmark3:before{content:"\e60c"}.icon-cancel3:before{content:"\e60d"}.icon-list:before{content:"\e612"}.icon-comments:before{content:"\e613"}.icon-download:before{content:"\e614"}.icon-info:before{content:"\e616"}.icon-moon:before{content:"\e617"}.icon-paperplane:before{content:"\e618"}.icon-heart:before{content:"\e61a"}.icon-heart2:before{content:"\e61b"}.icon-th-menu:before{content:"\e642"}.icon-settings:before{content:"\e63e"}.icon-search3:before{content:"\e63f"}.icon-switch3:before{content:"\e640"}.icon-bolt:before{content:"\e641"}.icon-pause:before{content:"\e018"}.icon-volume_up:before{content:"\e033"}.icon-crop_free:before{content:"\e157"}.icon-autorenew:before{content:"\e278"}.icon-print:before{content:"\e2c1"}.icon-settings_overscan:before{content:"\e2d7"}.icon-pencil22:before{content:"\e907"}.icon-bullhorn:before{content:"\e91a"}.icon-share2:before{content:"\ea82"}.icon-alert:before{content:"\f02d"}.icon-check2:before{content:"\f03a"}.icon-chevron-down2:before{content:"\f0a3"}.icon-chevron-left2:before{content:"\f0a4"}.icon-chevron-right2:before{content:"\f079"}.icon-chevron-up2:before{content:"\f0a2"}.icon-eye:before{content:"\f04e"}.icon-flame:before{content:"\f0d2"}.icon-gear:before{content:"\f02f"}.icon-playback-play:before{content:"\f0bf"}.icon-plus3:before{content:"\f05d"}.icon-rocket:before{content:"\f033"}.icon-sync:before{content:"\f087"}.icon-three-bars:before{content:"\f05e"}.icon-triangle-down:before{content:"\f05b"}.icon-triangle-left:before{content:"\f044"}.icon-triangle-right:before{content:"\f05a"}.icon-triangle-up:before{content:"\f0aa"}.icon-zap:before{content:"\26a1"}.icon-pencil2:before{content:"\e906"}.icon-clock:before{content:"\e94e"}.icon-bubble:before{content:"\e96b"}.icon-search2:before{content:"\e986"}.icon-trophy2:before{content:"\e99e"}.icon-rocket2:before{content:"\e9a5"}.icon-switch2:before{content:"\e9b6"}.icon-eye2:before{content:"\e9ce"}.icon-plus4:before{content:"\ea0a"}.icon-minus4:before{content:"\ea0b"}.icon-cross:before{content:"\ea0f"}.icon-checkmark4:before{content:"\ea10"}.icon-play3:before{content:"\ea1c"}.icon-pause2:before{content:"\ea1d"}.icon-stop2:before{content:"\ea1e"}.icon-backward2:before{content:"\ea1f"}.icon-forward3:before{content:"\ea20"}.icon-checkbox-checked:before{content:"\ea52"}.icon-checkbox-unchecked:before{content:"\ea53"}.icon-radio-checked:before{content:"\ea54"}.icon-radio-checked2:before{content:"\ea55"}.icon-radio-unchecked:before{content:"\ea56"}.icon-new-tab:before{content:"\ea7e"}.icon-google-plus:before{content:"\ea88"}.icon-facebook2:before{content:"\ea8c"}.icon-twitter2:before{content:"\ea91"}.icon-youtube4:before{content:"\ea9a"}.icon-printer:before{content:"\e658"}.icon-share22:before{content:"\e65a"}.icon-search:before{content:"\f002"}.icon-check:before{content:"\f00c"}.icon-close:before{content:"\f00d"}.icon-remove:before{content:"\f00d"}.icon-times:before{content:"\f00d"}.icon-power-off:before{content:"\f011"}.icon-cog2:before{content:"\f013"}.icon-gear2:before{content:"\f013"}.icon-bookmark:before{content:"\f02e"}.icon-camera:before{content:"\f030"}.icon-play:before{content:"\f04b"}.icon-chevron-left:before{content:"\f053"}.icon-chevron-right:before{content:"\f054"}.icon-plus-circle:before{content:"\f055"}.icon-minus-circle:before{content:"\f056"}.icon-times-circle:before{content:"\f057"}.icon-check-circle:before{content:"\f058"}.icon-minus:before{content:"\f068"}.icon-exclamation-circle:before{content:"\f06a"}.icon-exclamation-triangle:before{content:"\f071"}.icon-warning:before{content:"\f071"}.icon-comment:before{content:"\f075"}.icon-chevron-up:before{content:"\f077"}.icon-chevron-down:before{content:"\f078"}.icon-comments2:before{content:"\f086"}.icon-trophy:before{content:"\f091"}.icon-twitter:before{content:"\f099"}.icon-facebook:before{content:"\f09a"}.icon-facebook-f:before{content:"\f09a"}.icon-square:before{content:"\f0c8"}.icon-bars:before{content:"\f0c9"}.icon-navicon:before{content:"\f0c9"}.icon-reorder:before{content:"\f0c9"}.icon-caret-down:before{content:"\f0d7"}.icon-caret-up:before{content:"\f0d8"}.icon-caret-left:before{content:"\f0d9"}.icon-caret-right:before{content:"\f0da"}.icon-sort:before{content:"\f0dc"}.icon-unsorted:before{content:"\f0dc"}.icon-angle-left:before{content:"\f104"}.icon-angle-right:before{content:"\f105"}.icon-angle-up:before{content:"\f106"}.icon-angle-down:before{content:"\f107"}.icon-circle-o:before{content:"\f10c"}.icon-circle:before{content:"\f111"}.icon-ellipsis-h:before{content:"\f141"}.icon-ellipsis-v:before{content:"\f142"}.icon-vk2:before{content:"\f189"}.icon-toggle-off:before{content:"\f204"}.icon-toggle-on:before{content:"\f205"}.icon-whatsapp:before{content:"\f232"}

Aqui estan agregados todos los Iconos

Alexk · 08/01/2017

y si tienes la font en ese directorio?
"fonts/icomoon.ttf"
si tu css esta en la raiz de tu web? ejemplo: "miweb/style.css" pero si esta en "miweb/css/style.css" pues tienes que tocar el codigo que te dieron y ponerle "../fonts/icomoon.ttf" entiendes?
Un saludo.

sevilla666 · 08/01/2017

En principio para generar el icono en la pagina. Icomoon lo deja muy claro el tema:
abres: icomoon --> Seleccionas icono --> Generate Font --> Download --> descomprimes y abres el archivo "demo.html" --------lo acabo de probar y funciona perfectamente-------

cesardpaz · 08/01/2017

Te estas equivocando en poner las urls correctamente .. si no quieres tocar nada del codigo que te dan has esto:.

1) crea una carpeta llamada FONTS en la raiz del theme, y ahi metes tus 4 archivos que te vienen

2) copia y pega el archivo STYLE al final de tu STYLE de Wordpress

r0y · 08/01/2017

cesardpaz disse:
Te estas equivocando en poner las urls correctamente .. si no quieres tocar nada del codigo que te dan has esto:.

1) crea una carpeta llamada FONTS en la raiz del theme, y ahi metes tus 4 archivos que te vienen

2) copia y pega el archivo STYLE al final de tu STYLE de Wordpress

Lo que sucede es que la web tiene los fonts y style de icomoon pero tiene otros iconos que algunos de los que quiero usar me salen en cuadrito, para eso creo que tendría que cambiar completamente los iconos de la web por otros

sevilla666 · 09/01/2017

Si te faltan iconos, tendrías que que generar los iconos que necesitas. fijate en el archivo ttf, si lo abres hay salen los iconos que tienes generados.

r0y · 09/01/2017

sevilla666 disse:
Si te faltan iconos, tendrías que que generar los iconos que necesitas. fijate en el archivo ttf, si lo abres hay salen los iconos que tienes generados.

Ese archivo me sale encriptado

sevilla666 · 10/01/2017

raysn22 disse:
Ese archivo me sale encriptado

Dudo que este encriptado, otra cosa es que lo estes abriendo con el editor de texto.

En linux se ve perfectamente, en Windows no se si veras los iconos, pero mínimo deberías ver un ejemplo de fuente tipo "Lorem Ipsum...".

En principio tienes que generar las fuentes con los iconos que necesites, como te dije en dos post anteriores:
abres: icomoon --> Seleccionas iconos --> Generate Font --> Download --> descomprimes

Los archivos del directorio fonts los tienes que sustituir en tu servidor donde corresponda.
la hoja de estilos tienes que modificar los iconos que vas a usar tipo:

Inserir CODE, HTML ou PHP:

.icon-mic:before {
  content: "\e91e";
}
.icon-book:before {
  content: "\e91f";
}

Y tu pagina html tienes que cambiar donde van los iconos la Class tipo:

Inserir CODE, HTML ou PHP:

<span class="icon-book">

Asi te deberia funcionar,
Haz copia de seguridad antes de modificar algo.

Pedroovh · 10/01/2017

Alexk disse:
y si tienes la font en ese directorio?
"fonts/icomoon.ttf"
si tu css esta en la raiz de tu web? ejemplo: "miweb/style.css" pero si esta en "miweb/css/style.css" pues tienes que tocar el codigo que te dieron y ponerle "../fonts/icomoon.ttf" entiendes?
Un saludo.

Esto mismo.

Solução para ícones Icomoon no Wordpress

r0y

Alexk

r0y

Alexk

sevilla666

cesardpaz

r0y

sevilla666

r0y

sevilla666

Pedroovh

Tópicos similares