文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用GitHub的primer和octicons？

问如何使用GitHub的primer和octicons？
EN

Stack Overflow用户

提问于 2016-07-11 09:07:08

回答 3查看 17.7K关注 0票数 17

我正在尝试使用GitHub的primer和octicons。在使用npm安装了这两个类之后，我开始使用由GitHub定义的css类，方法是在我的html文档中包含build.css文件。我如何将项目指向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>

css

github

sass

html

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-07-18 09:08:21

编辑简短回答:包括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>

编辑

如果你真的觉得需要它，这里有一个使用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>

票数 14

Stack Overflow用户

发布于 2016-08-04 09:23:24

为什么我们不直接使用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">

票数 12

Stack Overflow用户

发布于 2016-07-26 05:11:45

使用Bower安装Octicons。

bower.json：

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

然后链接到您的bower库所在的位置：

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38297863

复制

相似问题

问如何使用GitHub的primer和octicons？
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用GitHub的primer和octicons？EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用GitHub的primer和octicons？
EN