您如何使用GitHub的入门书和octicon？

html CSS

小宇宙

2020-03-24

我正在尝试使用GitHub的入门和octicons。在使用npm完两者安装之后，我开始通过将build.css文件包含在html文档中来使用GitHub定义的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>

第3548篇《您如何使用GitHub的入门书和octicon？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共3个回答
古一 2020.03.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">
村村Eva 2020.03.24

使用Bower安装Octicons。

bower.json：

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

然后链接到存放凉亭库的任何地方：

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

[编辑]答案很简单：包括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 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android