Biblioteca de fuentes de iconos FontAwesome y marco CSS

1. Introducción a CSS Framework

Font Awesome es una excelente biblioteca de fuentes de iconos y marco CSS, que le proporciona iconos vectoriales escalables, puede usar todas las funciones proporcionadas por CSS para cambiarlas, incluyendo: tamaño, color, sombra o cualquier otro efecto de soporte. Solo una biblioteca de fuentes Font Awesome contiene casi iconos de imágenes relacionados con páginas web. Font Awesome no se basa en JavaScript en absoluto, por lo que no hay necesidad de preocuparse por la compatibilidad.

Fundador del marco: Dave Gandy (Dave Gandy)

Sitio web chino: https://fontawesome.dashgame.com/

2. Cómo usar

(1) Descargue el marco CSS

Descargue el marco CSS del sitio web anterior y agréguelo al proyecto.

(2) Referencia de estilo

Estilos de cotización en páginas HTML. como sigue:

<!--FontAwesome图标字体样式库-->
<link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">

(3) Agregar icono

Utilice iconos de fuentes en la página. como sigue:

<i class="fa fa-shopping-cart"></i> 我的购物车

[Ejemplo] Utilice la biblioteca de fuentes de iconos FontAwesome para generar imágenes relevantes requeridas por las páginas web.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FontAwesome图标字体库</title>
    <meta name="author" content="pan_junbiao的博客">

    <!--FontAwesome图标字体样式库-->
    <link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css">

    <style>
        table { border-collapse: collapse;}
        table,table tr th, table tr td { border:1px solid #000000; padding: 5px 10px;}
    </style>
</head>
<body>
    <table align="center">
        <tr>
            <th>CSS框架:</th>
            <td>FontAwesome图标字体库</td>
        </tr>
        <tr>
            <th>框架创始人:</th>
            <td>戴夫·甘迪(Dave Gandy)</td>
        </tr>
        <tr>
            <th>字体图标:</th>
            <td>
                <i class="fa fa-shopping-cart"></i> fa-shopping-cart<br/>
                <i class="fa fa-thumbs-o-up"></i> fa-thumbs-o-up<br/>
                <i class="fa fa-thumbs-o-down"></i> fa-thumbs-o-down<br/>
                <i class="fa fa-bell-o"></i> fa-bell-o<br/>
                <i class="fa fa-commenting-o"></i> fa-commenting-o<br/>
                <i class="fa fa-folder-open"></i> fa-folder-open<br/>
                <i class="fa fa-gamepad"></i> fa-gamepad<br/>
                <i class="fa fa-id-card-o"></i> fa-id-card-o<br/>
            </td>
        </tr>
        <tr>
            <th>博客信息:</th>
            <td>您好,欢迎访问 pan_junbiao的博客</td>
        </tr>
        <tr>
            <th>博客地址:</th>
            <td>https://blog.csdn.net/pan_junbiao</td>
        </tr>
    </table>
</body>
</html>

Resultados del:

 

Supongo que te gusta

Origin blog.csdn.net/pan_junbiao/article/details/109671328
Recomendado
Clasificación