web-dev-qa-db-fra.com

Comment utilisez-vous l'amorce et les octicons de GitHub?

J'essaie d'utiliser primer et octicons de GitHub. Après avoir utilisé npm pour installer les deux, j'ai commencé à utiliser les classes css définies par GitHub en incluant build.css fichier dans mon document html. Comment diriger le projet vers toutes les icônes svg que octicons me donne?

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

<head>
    <meta charset="UTF-8">
    <title>Hello Primer</title>
    <link rel="stylesheet" href="node_modules/primer-css/build/build.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>
htmlcssgithubsass
16
mbigras

[modifier] réponse courte: inclure node_modules/octicons/build/font/octicons.css

Cela fonctionne, sans icônes svg. Si vous souhaitez utiliser les icônes svg, vous devez probablement inclure les images à l'aide de <img> Mots clés. Cependant, l'utilisation d'une police facilite grandement les choses.

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

<head>
    <meta charset="UTF-8">
    <title>Hello Primer</title>
    <link rel="stylesheet" href="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>

Éditer

Et si vous en ressentez vraiment le besoin, voici une version utilisant svg:

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

<head>
    <meta charset="UTF-8">
    <title>Hello Primer</title>
    <link rel="stylesheet" href="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>
12
Lennart

Pourquoi n'utilisons-nous pas simplement un lien cdn, ou téléchargeons-nous à partir de là?

<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">
11
allenhwkim

Utilisez Bower pour installer les octicons.

bower.json:

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

Ensuite, créez un lien vers l'endroit où se trouvent vos bibliothèques Bower:

<link href="/libs/octicons/build/font/octicons.css" rel="stylesheet">
2
Daniel Flippance