html - 如何将 ocicons 添加为类似于 atom 的字体

Question

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

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

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

标签： htmlcssfontsfont-faceatom-editor

Answer 1

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

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

1. 下载 Octicons 字体：-此链接提供 Octicons Regular 字体。下载 TrueType 字体文件格式 (.ttf)。

2. 创建 WebFont Kit：-将下载的 (.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;
}