Login/Register
How do you use GitHub's primer and octicons?
Asked Answered
Solved htmlcssgithubsass
H

4

17

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?

    <!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>
Heraclitus answered 11/7, 2016 at 1:7 Comment(0)
B
14

[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>
Beckon answered 18/7, 2016 at 1:8 Comment(5)
Why did you include the src: url('node_modulles/octicons/build/font/octicons.woff') format('woff') lines? it seems like node_modules is misspelled, I commented it out and everything still worked, so are those lines not required? – Heraclitus
Good catch. They are also included in octicons/build/font/octicons.css so are not needed. I guess I included them because I first used the wrong css file. – Beckon
As of this writing, npm install octicons does not include a font directory or an octicons.css file. Not sure what's up with that. – Buddleia
@Buddleia They switched to building route so they will not provide the fonts anymore last version with fonts is v4 – Blister
What does "building route" mean in this context? Is there any other way to create a web font from the collection of svg files? – Kwangtung
P
12

Why don't we just use cdn link, or download from there?

<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">
Portraiture answered 4/8, 2016 at 1:23 Comment(1)
This answer seems deprecated, no? It seems Octicons changed in the way of how to use it. – Cristoforo
U
2

Use Bower to install Octicons.

bower.json:

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

Then link to wherever your bower libraries are being held:

<link href="/libs/octicons/build/font/octicons.css" rel="stylesheet">
Underscore answered 25/7, 2016 at 21:11 Comment(1)
This worked for me. The Octicons package available on the website as of 2019 is missing the fonts, but the one in bower has all the necessary files. – Vexillum
A
1

Update for those reading in 2023:

I faced a similar issue and was annoyed by how, in spite of using Bootstrap icons and Devicon as CDN-distributed CSS, I had to resort to importing Octicon SVGs individually. For this reason, I created my own little build pipeline that bundles the SVGs in a CSS distribution. Here is the project repository, and if you want to include it using CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/octicons-css/octicons.min.css">
Absquatulate answered 15/5, 2023 at 8:26 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.