Saltar al contenido

¿Cómo se usa la imprimación y los octicons de GitHub?

Solución:

[edit] respuesta corta: incluir node_modules/octicons/build/font/octicons.css

Esto funciona, sin iconos svg. Si desea usar los íconos svg, probablemente debería incluir las imágenes usando <img> etiquetas. Sin embargo, usar una fuente hace que esto sea mucho más fácil.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello Primer</title>
    <link rel="stylesheet" href="https://foroayuda.es/node_modules/primer-css/build/build.css">
    <link rel="stylesheet" href="node_modules/octicons/build/font/octicons.css">
</head>

<body>
    <form>
        <div class="input-group">
            <input class="form-control" type="text" placeholder="Username">
            <span class="input-group-button">
                <button class="btn">
                    <span class="octicon octicon-clippy"></span>
                </button>
            </span>
        </div>
    </form>
</body>

</html>

Editar

Y si realmente sientes la necesidad de hacerlo, aquí tienes una versión que usa svg‘s:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello Primer</title>
    <link rel="stylesheet" href="https://foroayuda.es/node_modules/primer-css/build/build.css">
    <link rel="stylesheet" href="node_modules/octicons/build/octicons.css">
</head>

<body>
    <form>
        <div class="input-group">
            <input class="form-control" type="text" placeholder="Username">
            <span class="input-group-button">
                <button class="btn">
                    <span class="octicon octicon-clippy"></span>
                    <img src="node_modules/octicons/lib/svg/clippy.svg"></img>
                </button>
            </span>
        </div>
    </form>
</body>

</html>

¿Por qué no usamos el enlace cdn o lo descargamos desde allí?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Primer/3.0.1/css/primer.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/3.5.0/octicons.min.css">

Utilice Bower para instalar Octicons.

bower.json:

{
    "name": "my-app",
    ...
    "dependencies": {   
        "octicons": "4.3.0",
    }
}

Luego, enlace al lugar donde se encuentren sus bibliotecas de bower:

<link href="https://foroayuda.es/libs/octicons/build/font/octicons.css" rel="stylesheet">
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *