如何将octicons添加为类似于atom的字体

Question

如何将 octicons 添加为类似于 atom 的字体？

在检查 atom 代码库时，我发现他们正在使用设置为字体的 octicon 图标 (font-family: 'Octicons Regular' & content: "\f0a4")。我将如何以这种方式将集合实施到我自己的项目中？有 public 版本吗？

下图是atom src显示样式的截图。 (Ctrl+Shift+I)

Answer 1

Octicons Regular 没有可用的 CDN，因此您必须获取自己的 WebFontkit。然后你必须使用 @font-face 参数添加字体。

按照以下步骤将自定义字体添加到您的 HTML:-

1.下载 Octicons 字体：- Octicons Regular 字体可在此 link. 下载 TrueType 字体文件格式 (.ttf)。

2。创建 WebFont 套件：- 将下载的 (.ttf) 文件上传到 WebFontkit Generator.。然后下载最优的WebFontkit。

3。提取字体文件并将其上传到您的托管站点：- 编辑 stylesheet.css 文件以更新 url。例如，如果您有 url，例如 www.example.com。所以更新后的 .css 文件看起来像：-

@font-face {
font-family: "Octicons";
src: url("https://example.com/css/fonts/Octicons.woff") format("woff"),
url("https://example.com/css/fonts/Octicons.woff2") format("woff2")
}

4.在您的 CSS 声明中使用 Octicons 字体：- 当您将 css 字体添加到您的网站时，您可以在您的 CSS 声明中使用它。例如，

p {
font-family: Octicons;
font-weight:normal;
font-style:normal;
}

如何将octicons添加为类似于atom的字体

How to add octicons as font similar to atom

html

css

fonts

font-face

atom-editor