📌  相关文章
📜  八度图标签 (1)

📅  最后修改于: 2023-12-03 14:50:04.449000             🧑  作者: Mango

八度图标签

八度图标签（octicons）是 GitHub 官方开源的一套图标库，包含了多种不同用途的图标，例如文件夹、文件、用户、注释等等。这些图标可以应用于 Web 开发和桌面开发等不同领域。

主要特点

  1. 开源：八度图标标签完全开源，并且可以在 GitHub 上进行贡献。

  2. 自适应：八度图标标签可以根据不同的屏幕分辨率进行缩放，提高用户体验。

  3. 易于使用：在 Web 开发中，可以使用 CSS 或 JavaScript 直接引入 Icon。

  4. 丰富的图标资源：八度图标标签提供了多种不同用途的图标，可以满足开发需求。

使用方法

八度图标标签提供了两种使用方法：

使用 CSS 引入

可以通过在 HTML 中引入 CSS 样式表，并使用类名来渲染 Icon，示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/14.0.0-0/octicons.min.css" integrity="sha512-/LUz0dg+O/fOalzlwOhWfYJ5ShNyqb5b5US5X9+5+w5YSACBKhL/D3605d/f/Kl1BuY+scPLuSVUDVJjc4Z4g==" crossorigin="anonymous" />
  </head>
  <body>
    <i class="octicon octicon-file"></i>
  </body>
</html>
使用 JavaScript 引入

通过引入 Octicons 的 JavaScript 库，可以直接在 JavaScript 中使用 Icon，示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/octicons/14.0.0-0/octicons.min.js" integrity="sha512-FCqWna33JnFtBhiX9v9E8+1uuJjKzdgTY+iInom2CFzYwCjKm0iAhOxO9ZvEZ8k+ytbe1BtOGyVGtM2D+8CEzQ==" crossorigin="anonymous"></script>
  </head>
  <body>
    <script>
     document.write(octicons.file.toSVG());
    </script>
  </body>
</html>
图标列表

以下是八度图标标签中部分图标的样式和名称：

Icon | CSS 类名 | JavaScript 名称 --- | --- | --- 文件夹 | octicon-folder | octicons.folder 文件 | octicon-file | octicons.file 用户 | octicon-person | octicons.person 注释 | octicon-comment-discussion | octicons.comment-discussion

代码片段
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/14.0.0-0/octicons.min.css" integrity="sha512-/LUz0dg+O/fOalzlwOhWfYJ5ShNyqb5b5US5X9+5+w5YSACBKhL/D3605d/f/Kl1BuY+scPLuSVUDVJjc4Z4g==" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/octicons/14.0.0-0/octicons.min.js" integrity="sha512-FCqWna33JnFtBhiX9v9E8+1uuJjKzdgTY+iInom2CFzYwCjKm0iAhOxO9ZvEZ8k+ytbe1BtOGyVGtM2D+8CEzQ==" crossorigin="anonymous"></script>
  </head>
  <body>
    <i class="octicon octicon-file"></i>
    <script>
     document.write(octicons.folder.toSVG());
    </script>
  </body>
</html>

以上是使用 CSS 和 JavaScript 引入 Icon 的代码示例。可以在上述代码中修改 Icon 的类名或名称来选择不同的 Icon。