你如何使用GitHub的引物和octicons?

mbi*_*ras 16 html css github sass

我正在尝试使用GitHub的引物octicons.在使用npm安装后我开始使用GitHub定义的css类,将build.css文件包含在我的html文档中.我如何将项目指向octicons给我的所有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">
</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>
Run Code Online (Sandbox Code Playgroud)

Len*_*art 12

[编辑]简答:包括node_modules/octicons/build/font/octicons.css

这有效,没有svg图标.如果要使用svg图标,则应该使用<img>标记包含图像.但是,使用字体会使这更容易.

<!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>
Run Code Online (Sandbox Code Playgroud)

编辑

如果你真的觉得需要它,这是一个使用的版本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>
Run Code Online (Sandbox Code Playgroud)

  • 在撰写本文时,`npm install octicons`不包含`font`目录或`octicons.css`文件.不确定是什么. (8认同)
  • 在这种情况下,"建筑路线"意味着什么?有没有其他方法可以从svg文件集合中创建Web字体? (4认同)

all*_*kim 11

为什么我们不使用cdn链接,或从那里下载?

<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">
Run Code Online (Sandbox Code Playgroud)

  • 这个答案似乎已被弃用,不是吗?Octicons 的使用方式似乎发生了变化。 (2认同)