Lucide 中文网

Appearance

Icon Font ​

Lucide 图标也可作为网页字体使用。该字体将所有图标作为字形包含在内，允许你通过 CSS 类在项目中使用它们。这对于偏好使用图标字体的项目来说是一个方便的选项。

🌐 Lucide icons are also available as a web font. The font includes all icons as glyphs, allowing you to use them in your project with CSS classes. This can be a convenient option for projects that prefer using icon fonts.

不建议用于高流量生产环境

图标字体包含所有图标，这可能会显著增加应用的包大小和加载时间。对于生产环境，我们建议使用支持 tree-shaking 的打包工具，仅包含你实际使用的图标。可以考虑使用特定框架的包之一。

使用 CSS 样式表 ​

🌐 Using the CSS Stylesheet

css
@import 'lucide-static/font/lucide.css';
css
@import "~lucide-static/font/lucide.css";
html
<link rel="stylesheet" href="https://unpkg.com/lucide-static@latest/font/lucide.css" />
html
<link rel="stylesheet" href="/your/path/to/lucide.css" />

使用图标字体 ​

🌐 Using the Icon Font

一旦你包含了样式表，就可以通过应用相应的 CSS 类在你的 HTML 中使用图标。每个图标都有一个对应的类名，你可以使用它来显示图标。

🌐 Once you have included the stylesheet, you can use the icons in your HTML by applying the appropriate CSS classes. Each icon has a corresponding class name that you can use to display it.

例如，要显示“主页”图标，你可以使用以下 HTML：

🌐 For example, to display the "home" icon, you would use the following HTML:

html
<div class="icon-house"></div>

JavaScript 示例 ​

🌐 Example with JavaScript

<!DOCTYPE html>
<html>
  <body>
    <i class="icon-home"></i>

    <script src="index.js"></script>
  </body>
</html>
Open on CodeSandboxOpen Sandbox