mbigras mbigras - 4 months ago 156
HTML Question

How to use GitHub's primer and octicons?

I'm trying to use GitHub's primer and octicons. After using

npm
to install both I started using the css classes defined by GitHub by including the
build.css
file in my html document. How would I point the project towards all the svg icons that
octicons
gives me?

Thanks

Answer

[edit] short answer: include node_modules/octicons/build/font/octicons.css

This works, without svg icons. If you want to use the svg icons, you should probably include the images using <img> tags. However, using a font makes this a lot easier.

<!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>

Edit

And if you really feel the need for it, here is an version using svg's:

<!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>