GitHubの primer および octicons を使用しようとしています。 npm
を使用して両方をインストールした後、HTMLドキュメントにbuild.css
ファイルを含めることにより、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>
[編集]短い答え: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>
なぜ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">
Bower を使用して、Octiconsをインストールします。
bower.json:
{
"name": "my-app",
...
"dependencies": {
"octicons": "4.3.0",
}
}
その後、バウアーライブラリーが保持されている場所にリンクします。
<link href="/libs/octicons/build/font/octicons.css" rel="stylesheet">