WEB APPS

Iconos Tipográficos para utilizar en tu web con CSS

Si eres diseñador web ya conoces las tipografías de iconos o iconos tipográficos. Hay varias tipografías con iconos que puedes utilizar, y depende del theme que utilices en tu WordPress, Joomla, Prestashop, etc tendrá implementado uno u otro. La mejor opción es utilizar la tipografía de iconos que viene «de serie» en cada theme, pero si además quieres usar otro te muestro a continuación los que más utilizo.

 

Dashicon

Es la tipografía de iconos oficial del administrador de WordPress. Tiene 303 iconos.

Puedes ver todos los iconos en https://developer.wordpress.org/resource/dashicons/#wordpress

Cómo meter iconos en mi web

  • Copia en tu página el código HTML del icono que te interesa, por ejemplo:

<span class=»dashicons dashicons-wordpress»></span>

  • O puedes hacerlo mediante CSS, añadiendo en tu class: content: «\f120»;
    • Por ejemplo: .icono-logo-wordpress:after{content: «\f120»;}

 

Menú de administrador | Admin menu

\f333
\f228
\f329
\f349
\f319
\f11d
\f11e
\f11f
\f226
\f109
\f104
\f105
\f101
\f100
\f106
\f485
\f110
\f107
\f108
\f112
\f102
\f111
\f148
\f536
\f540
\f541

Pantalla de bienvenida

\f119
\f133
\f115
\f116
\f117
\f118

Formatos de publicaciones

\f123
\f128
\f126
\f130
\f122
\f125
\f127
\f306
\f129
\f232
\f233
\f234
\f235
\f236

Media

\f501
\f500
\f499
\f498
\f497
\f496
\f495
\f491
\f490
\f492
\f493
\f522
\f523
\f519
\f517
\f518
\f516
\f515
\f521
\f520

Edición de imagen

\f165
\f531
\f166
\f167
\f168
\f169
\f533
\f171
\f172

TinyMCE

\f200
\f201
\f203
\f204
\f12c
\f205
\f206
\f207
\f208
\f209
\f210
\f211
\f506
\f212
\f213
\f214
\f215
\f216
\f217
\f218
\f219
\f220
\f221
\f222
\f223
\f224
\f320
\f10c
\f474
\f475
\f476
\f535

Pantalla de publicaciones

\f135
\f136
\f134
\f138
\f160
\f528
\f145
\f508
\f177
\f530
\f173
\f464
\f182
\f537

Clasificación

\f504
\f142
\f140
\f139
\f141
\f342
\f346
\f344
\f340
\f343
\f347
\f345
\f341
\f156
\f229
\f503
\f163
\f164
\f509
\f545

Social

\f237
\f240
\f242
\f301
\f302
\f303
\f465
\f466
\f467
\f304
\f305
\f462
\f325
\f12d

WordPress.org específico: trabajos, perfiles, WordCamps

\f308
\f309
\f310
\f311
\f483
\f507
\f486
\f484
\f481
\f487
\f488
\f489
\f10d
\f124
\f13a

Iconos de BuddyPress y BBPress

\f452
\f453
\f449
\f454
\f456
\f457
\f451
\f450
\f455

Products

\f120
\f324
\f157
\f463
\f113
\f180
\f348
\f174
\f175
\f176
\f326

Taxonomies

tag
\f318

Widgets

\f480
\f479
\f478

Notificaciones

\f147
\f12a
\f158
\f335
\f132
\f502
\f543
\f460
\f153
\f159
\f155
\f459
\f154
\f227
\f534

Varios

\f230
\f231
\f178
\f332
\f334
\f468
\f181
\f121
\f183
\f184
\f185
\f238
\f239
\f307
\f338
\f12f
\f12e
\f336
\f337
\f312
\f313
\f314
\f473
\f322
\f330
\f331
\f316
\f317
\f321
\f469
\f339
\f482
\f472
\f547
\f471
\f470
\f525
\f510
\f511
\f512
\f513
\f514
\f527
\f524
\f526
\f328
\f529
\f542
\f538
\f546
\f131
\f327

ICONOS ETMODULES

Para usar estos iconos tan solo debes incluir estas líneas en tu web:

<style>@font-face {
font-family: 'eleganticons';
src: url('https:www.tuWeb/tu-ruta/ElegantIcons.ttf') format('truetype'); // NO OLVIDES CAMBIAR ESTO
font-weight: normal;
font-style: normal;
}
</style>

 

Y después añadirlos en el HTML así:

<p aria-hidden="true" data-icon="&#x37;"></p>
[data-icon]:before {  font-family: 'ElegantIcons';

o con su código css (es el mismo código pero quitándole el &#x:

h2:before {content: "\37";font-family: 'ETmodules';}

ICONOS ETMODULES



Ir al contenido
Diseño de páginas web Gipuzkoa autónomos - Estudio de Diseño Web Kreatibu
Resumen de privacidad


En cumplimiento con el deber de información recogido en artículo 10 de la Ley 34/2002, de 11 de Julio, de Servicios de la Sociedad de la Información y del Comercio Electrónico, le informamos que el Sitio Web y el portal de Internet https://www.kreatibu.com, (en adelante, el «Web») es titularidad de Emma Echeverria en Adelante, KREATIBU, con domicilio social en Baltasar Echave 20750 Zumaia. El presente aviso legal regula las condiciones de uso del citado portal de Internet.

Ver Aviso Legal y Privacidad
Esta web usa cookies y tecnologías similares. Si no cambia la configuración del navegador acepta su uso.
Si no cambia la configuración de su navegador, usted acepta su uso. Saber más