你如何使用 GitHub 的primer 和 octacons？
Posted
技术标签:
【中文标题】你如何使用 GitHub 的primer 和 octacons？【英文标题】：How do you use GitHub's primer and octicons? 【发布时间】：2016-11-12 20:45:09 【问题描述】：我正在尝试使用 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>【问题讨论】：
【参考方案1】：[编辑]简短回答：包括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>
【讨论】：
为什么要包含src: url('node_modulles/octicons/build/font/octicons.woff') format('woff') 行？ node_modules 似乎拼写错误，我已将其注释掉，但一切仍然有效，那么这些行不是必需的吗？
好收获。它们也包含在octicons/build/font/octicons.css 中，因此不需要。我想我包括它们是因为我第一次使用了错误的 css 文件。
撰写本文时，npm install octicons 不包括font 目录或octicons.css 文件。不知道这是怎么回事。
@shacker 他们切换到构建路线，因此他们将不再提供字体 最后版本的字体是 v4
在这种情况下，“建筑路线”是什么意思？有没有其他方法可以从 svg 文件的集合中创建网络字体？【参考方案2】：
使用Bower 安装 Octicons。
bower.json：
"name": "my-app",
...
"dependencies":
"octicons": "4.3.0",
然后链接到您的凉亭图书馆所在的位置：
<link href="/libs/octicons/build/font/octicons.css" rel="stylesheet">
【讨论】：
这对我有用。截至 2019 年，网站上提供的 Octicons 软件包缺少字体，但 bower 中的软件包包含所有必要的文件。【参考方案3】：我们为什么不直接使用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">
【讨论】：
这个答案似乎已被弃用，不是吗？ Octicons 的使用方式似乎发生了变化。以上是关于你如何使用 GitHub 的primer 和 octacons？的主要内容，如果未能解决你的问题，请参考以下文章
Xcode8使用CoreData如何生成OC和Swift版的SubClass
text Primer Paso：Informando para GitHub mi nombre y luego mi email