我正在尝试使用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>
答案 0 :(得分:12)
[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>
答案 1 :(得分:10)
为什么我们不使用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">
答案 2 :(得分:2)
使用Bower安装Octicons。
bower.json:
{
"name": "my-app",
...
"dependencies": {
"octicons": "4.3.0",
}
}
然后链接到您的凉亭图书馆所在的位置:
<link href="/libs/octicons/build/font/octicons.css" rel="stylesheet">