зеркало из https://github.com/twbs/icons.git
Generate font page with Hugo (#706)
* Generate font page with Hugo * fix * fix font path * Fix up stylesheet URLs * Add description Co-authored-by: Mark Otto <markdotto@gmail.com>
This commit is contained in:
XhmikosR
GitHub
Родитель
43dac5682d
Коммит
d0ab650612
|
|
@ -6,7 +6,7 @@ module.exports = {
|
|||
inputDir: './icons', // (required)
|
||||
outputDir: './font', // (required)
|
||||
fontTypes: ['woff2', 'woff'],
|
||||
assetTypes: ['css', 'scss', 'json', 'html'],
|
||||
assetTypes: ['css', 'scss', 'json'],
|
||||
name: 'bootstrap-icons',
|
||||
codepoints,
|
||||
prefix: 'bi',
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{{ name }}</title>
|
||||
|
||||
<style>
|
||||
.icons {
|
||||
display: grid;
|
||||
max-width: 100%;
|
||||
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr) );
|
||||
gap: 1.25rem;
|
||||
}
|
||||
.icon {
|
||||
background-color: var(--bs-light);
|
||||
border-radius: .25rem;
|
||||
}
|
||||
.bi {
|
||||
margin: .25rem;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.label {
|
||||
font-family: var(--bs-font-monospace);
|
||||
}
|
||||
.label {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
padding: .25rem;
|
||||
font-size: .625rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="{{ name }}.css">
|
||||
</head>
|
||||
<body class="text-center">
|
||||
|
||||
<h1>{{ name }}</h1>
|
||||
|
||||
<div class="icons">
|
||||
{{# each assets }}
|
||||
<div class="icon">
|
||||
<{{ ../tag }} class="{{ ../prefix }} {{ ../prefix }}-{{ @key }}"></{{ ../tag }}>
|
||||
<div class="label">{{ @key }}</div>
|
||||
</div>
|
||||
{{/ each }}
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
title: Icon Font
|
||||
description: Use Bootstrap Icons as an icon font, built from our SVGs and easily customized with CSS.
|
||||
layout: font
|
||||
---
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{{ partial "head" . }}
|
||||
</head>
|
||||
<body id="icons-body" class="text-center">
|
||||
{{ partialCached "skippy" . }}
|
||||
{{ partialCached "navbar" . }}
|
||||
|
||||
<main class="container-xxl bd-gutter" id="content">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb my-4 p-0">
|
||||
<li class="breadcrumb-item"><a href="/">Icons</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Font</li>
|
||||
</ol>
|
||||
</nav>
|
||||
{{ partialCached "icons" . "fonts" }}
|
||||
|
||||
{{ .Content }}
|
||||
</main>
|
||||
|
||||
{{- partialCached "footer" . }}
|
||||
{{- partialCached "scripts" . "fonts" }}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -8,9 +8,8 @@
|
|||
{{ partialCached "navbar" . }}
|
||||
{{ partialCached "home/hero" . }}
|
||||
|
||||
<main class="container" id="content">
|
||||
{{ partialCached "icons" . }}
|
||||
|
||||
<main class="container-xxl bd-gutter" id="content">
|
||||
{{ partialCached "icons" . "home" }}
|
||||
{{ .Content }}
|
||||
</main>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="hero py-5 text-center text-lg-start">
|
||||
<div class="container">
|
||||
<div class="container-xxl bd-gutter">
|
||||
<div class="row flex-lg-row-reverse">
|
||||
<div class="col-6 mx-auto col-lg-5 mx-lg-0">
|
||||
<img srcset="/assets/img/icons-hero.png, /assets/img/icons-hero@2x.png 2x"
|
||||
|
|
@ -33,6 +33,8 @@
|
|||
<span class="px-1">•</span>
|
||||
<a href="#icons">Icons</a>
|
||||
<span class="px-1">•</span>
|
||||
<a href="/font">Icon Font</a>
|
||||
<span class="px-1">•</span>
|
||||
<a href="#install">Install</a>
|
||||
<span class="px-1">•</span>
|
||||
<a href="#usage">Usage</a>
|
||||
|
|
|
|||
|
|
@ -13,9 +13,13 @@
|
|||
<li class="col mb-4"{{ with .Params.tags }} data-tags="{{ delimit . " " }}"{{ end }}{{ with .Params.categories }} data-categories="{{ delimit . " " | lower }}"{{ end }}>
|
||||
<a class="d-block text-dark text-decoration-none" href="{{ .RelPermalink }}">
|
||||
<div class="p-3 py-4 mb-2 bg-light text-center rounded">
|
||||
{{ if $.IsHome -}}
|
||||
<svg class="bi" width="1em" height="1em" fill="currentColor">
|
||||
<use xlink:href="bootstrap-icons.svg#{{ $filename }}"/>
|
||||
</svg>
|
||||
{{- else -}}
|
||||
<i class="bi bi-{{ $filename }}"></i>
|
||||
{{- end }}
|
||||
</div>
|
||||
<div class="name text-muted text-decoration-none text-center pt-1">{{ $filename }}</div>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{ $bootstrapJs := resources.Get "/js/bootstrap.min.js" }}
|
||||
<script src="{{ $bootstrapJs.Permalink | relURL }}"></script>
|
||||
|
||||
{{- if .IsHome }}
|
||||
{{- if or .IsHome (eq .Page.Layout "font") }}
|
||||
<script src="/assets/js/list.min.js"></script>
|
||||
<script>
|
||||
new List('icons-body', {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
{{- if eq .Layout "home" -}}
|
||||
<link rel="stylesheet" href="/assets/font/bootstrap-icons.css">
|
||||
{{- end -}}
|
||||
|
||||
{{- $sassOptions := dict "targetPath" "assets/css/docs.css" "precision" 6 -}}
|
||||
{{- $postcssOptions := dict "use" "autoprefixer" "noMap" true -}}
|
||||
|
|
|
|||
7291
font/index.html
7291
font/index.html
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Загрузка…
Ссылка в новой задаче