Solución para iconos Icomoon en Wordpress

  • Autor Autor r0y
  • Fecha de inicio Fecha de inicio
r0y

r0y

Dseda
Verificación en dos pasos activada
Verificado por Binance
Saludos tengo un pequeño inconveniente con los iconos de Icomoon sucede esto

iconosss.webp

Alguien que haya usado estos iconos que pueda ayudarme, ya agregue el código de iconos pero aun salen asi
 
¿Te sirvió? Únete a la conversación

Con tu cuenta gratis puedes responder, escribirle al autor por mensaje privado y comprar con Saldo retenido: el pago se libera cuando recibes lo acordado.

Continuar con Google Crear cuenta con correo
Toma 30 segundos · vuelves a este tema al terminar
Creo que si no pones el código no te pueden ayudar :encouragement:
 
Alexk dijo:
Creo que si no pones el código no te pueden ayudar :encouragement:
Hacer clic para expandir...

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
 
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.
 
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-------
 
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
 
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
Hacer clic para expandir...

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
 
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.
 
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.
Hacer clic para expandir...

Ese archivo me sale encriptado
 
raysn22 dijo:
Ese archivo me sale encriptado
Hacer clic para expandir...
Dudo que este encriptado, otra cosa es que lo estes abriendo con el editor de texto.

Sin nombre.gif
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.
 
Última edición:
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.
Hacer clic para expandir...

Esto mismo.
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

nuay
Tutorial: Flecha Ir Arriba para Wordpress
Respuestas
5
Visitas
76
CodeZen
CodeZen
lynkinson
  • Cerrado
Se solicita Necesito solución para abrir enlaces de TikTok Ads fuera del navegador interno
Respuestas
4
Visitas
162
Kyme
Kyme
lynkinson
  • Cerrado
Se solicita Necesito solución para abrir enlaces de TikTok Ads fuera del navegador interno
Respuestas
2
Visitas
40
WPE
WPE
cantasken
  • Cerrado
Me ofrezco 🚀 Desarrollo Plugins WordPress, WooCommerce, APIs y Automatizaciones | Soluciones a medida
Respuestas
0
Visitas
44
cantasken
cantasken
Ceferin
  • Cerrado
Me ofrezco Asistente Virtual, WordPress, WooCommerce, SEO, soluciones IA, bots.
Respuestas
6
Visitas
60
Ceferin
Ceferin
Atrás
Arriba