css 如何使用GitHub的primer和octicon？

velaa5lx 于 2023-05-19 发布在 Git

关注(0)|答案(4)|浏览(113)

我正在尝试使用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

来源：https://stackoverflow.com/questions/38297863/how-do-you-use-githubs-primer-and-octicons

4条答案

按热度按时间

mxg2im7a1#

**[edit]**简答：包括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>

赞(0）回复(0）举报 2023-05-19

vom3gejh2#

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

赞(0）回复(0）举报 2023-05-19

j7dteeu83#

使用Bower安装Octicons。
bower.json:

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

然后链接到你的凉亭图书馆所在的地方：

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

赞(0）回复(0）举报 2023-05-19

yrefmtwq4#

2023年阅读更新：
我也遇到了类似的问题，尽管使用Bootstrap图标和Devicon作为CDN分发的CSS，我还是不得不单独导入Octicon SVG。出于这个原因，我创建了自己的小构建管道，将SVG捆绑在CSS分发中。下面是project repository，如果你想使用CDN包含它：

<!-- 12px icon set -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/octicons-css/octicons/octicons-12/octicons.css">
<!-- 16px icon set -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/octicons-css/octicons/octicons-16/octicons.css">
<!-- 24px icon set -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/octicons-css/octicons/octicons-24/octicons.css">

赞(0）回复(0）举报 2023-05-19

我来回答

css 如何使用GitHub的primer和octicon？

4条答案

编辑

相关问题

热门标签

最新问答