Red de conocimiento informático - Material del sitio web - Cómo aplicar el estándar de fuente vectorial T

Cómo aplicar el estándar de fuente vectorial T

/*?Cara de fuente? Primero, el primer paso es establecer la ruta para llamar a fontawesome.

============================================ === ==================================?*/

@font- ¿rostro? {

Familia tipográfica:? fuente impresionante ';

src:? url('../fonts/fontawesome-webfont.eot?v = 4 . 3 . 0');

src:? url('../fonts/fontawesome-webfont.eot?# iefix & ampv = 4 . 3 . 0’)? formato ('tipo abierto integrado'),? url('../fonts/font awesome-web font . woff 2? v = 4 . 3 . 0')? formato('woff2'),? url('../fonts/font awesome-web font . woff? v = 4 . 3 . 0')? formato('guau'),? url('../fonts/fontawesome-webfont.ttf?v = 4 . 3 . 0')? formato ('tipo verdadero'),? url('../fonts/fontawesome-webfont.svg?v = 4 . 3 . 0 # fuente impresionante regular')? Formato('SVG');

Peso de fuente:? Normal;

Estilo de fuente:? Normal;

}

/*?Componente? Establece el tamaño predeterminado para las llamadas.

============================================ === ==================================?*/

[clase* ="soy -icono-"]? {

Pantalla:? Bloque en línea;

}

[class*="am-icon-"]:¿Antes? {

Pantalla:? Bloque en línea;

Fuente:? ¿normal? ¿normal? ¿normal? 1,6rem/1? "FontAwesome", fuente sans serif;

/*font-weight:? normal;? //2

Estilo de fuente:? normal;? ///?2

Alineación vertical:? base;? //Tres

Alto de fila:? 1;? //?4*/

Tamaño de fuente:? Heredado;

Representación de texto:? Auto;

-WebKit-Font-Smooth:? Antialiasing;

-moz-osx-font-smoothing:? Escala de grises;

-WebKit-Convert:? traducción(0,?0);

-ms-transform:? Traducir(0,?0);

Transformar:? Traducir(0,?0);

}

/*?Icono? ¿Cartografía? La tercera parte configura el contenido. El código en el contenido es el ícono fontawesome específico.

============================================ === ==================================?*/

. am-icon-glass: ¿Antes? {

Contenido:? "\f000";

}

. am-icon-music: ¿Antes? {

Contenido:? "\f001";

}

.

am-icon-search: ¿Antes? {

Contenido:? "\f002";

}

. am-icon-sobre-o: ¿Antes? {

Contenido:? "\f003";

}

. soy-icono-corazón: ¿Antes? {

Contenido:? "\f004";

}

. soy-icon-star: ¿Antes? {

Contenido:? "\f005";

}

. am-icon-star-o: ¿Antes? {

Contenido:? "\f006";

}

. soy-icono-usuario: ¿antes? {

Contenido:? "\f007";

}

. am-icon-film:¿Antes? {

Contenido:? "\f008";

}

. am-icon-th-large: ¿Antes? {

Contenido:? "\f009";

}

. am-icon-th: ¿Antes? {

Contenido:? "\f00a";

}

. am-icon-th-list: ¿Antes? {

Contenido:? "\f00b";

}

. am-icon-check: ¿antes? {

Contenido:? "\f00c";

}

. am-icon-remove:antes,

. am-icon-close:antes,

. am-icon-times: ¿antes? {

Contenido:? "\f00d";

}

. am-icon-search-plus: ¿Antes? {

Contenido:? "\f00e";

}

. am-icon-search-minus:¿Antes? {

Contenido:? "\f010";

}

. am-icon-apagón de energía: ¿antes? {

Contenido:? "\f011";

}

. am-icon-signal: ¿Antes? {

Contenido:? "\f012";

}

. am-icon-gear:antes,

. am-icon-cog: ¿Antes? {

Contenido:? "\f013";

}

. am-icon-trash-o: ¿Antes? {

Contenido:? "\f014";

}

. am-icon-home: ¿Antes? {

Contenido:? "\f015";

}

. am-icon-file-o: ¿Antes? {

Contenido:? "\f016";

}

. am-icon-clock-o: ¿Antes? {

Contenido:? "\f017";

}

. am-icon-road: ¿Antes? {

Contenido:? "\f018";

}

. soy-icon-descargar: ¿antes? {

Contenido:? "\f019";

}

. am-icon-arrow-circle-o-down:¿Antes? {

Contenido:? "\f01a";

}

. am-icon-arrow-circle-o-up:¿Antes? {

Contenido:? "\f01b";

}

.

am-icon-inbox: ¿Antes? {

Contenido:? "\f01c";

}

. am-icon-play-circle-o:¿Antes? {

Contenido:? "\f01d";

}

. am-icon-rotate-right:antes,

. am-icon-repeat: ¿antes? {

Contenido:? "\f01e";

}

. am-icon-refresh: ¿antes? {

Contenido:? "\f021";

}

. am-icon-list-alt: ¿Antes? {

Contenido:? "\f022";

}

. am-icon-lock: ¿Antes? {

Contenido:? "\f023";

}

. am-icon-flag: ¿Antes? {

Contenido:? "\f024";

}El siguiente es el efecto del programa:

Descargue los archivos relevantes del sitio web oficial de fontawesome, hay ejemplos para ilustrar. Para decirlo sin rodeos, fontawesome es la imagen vectorial svg que crearon y luego obtuvieron la imagen vectorial correspondiente a través del código de contenido y la mostraron en la página. Debido a que es una imagen vectorial y tiene material rico, es muy popular.

Te mando mi estructura de directorios: