Solución para iconos Icomoon en Wordpress

raysn22 · 8 Ene 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 · 8 Ene 2017

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

raysn22 · 8 Ene 2017

Alexk dijo:
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 · 8 Ene 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 · 8 Ene 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 · 8 Ene 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

raysn22 · 8 Ene 2017

cesardpaz dijo:
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 · 9 Ene 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.

raysn22 · 9 Ene 2017

sevilla666 dijo:
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 Ene 2017

raysn22 dijo:
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:

Insertar CODE, HTML o 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:

Insertar CODE, HTML o PHP:

<span class="icon-book">

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

Pedroovh · 10 Ene 2017

Alexk dijo:
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.

Solución para iconos Icomoon en Wordpress

raysn22

Alexk

raysn22

Alexk

sevilla666

cesardpaz

raysn22

sevilla666

raysn22

sevilla666

Pedroovh

Temas similares