Material Design Iconic Font 项目教程

1. 项目的目录结构及介绍

Material Design Iconic Font 项目的目录结构如下：

material-design-iconic-font/
├── css/
│   ├── material-design-iconic-font.min.css
│   └── ...
├── fonts/
│   ├── Material-Design-Iconic-Font.woff2
│   └── ...
├── less/
│   ├── _variables.less
│   └── ...
├── scss/
│   ├── _variables.scss
│   └── ...
├── LICENSE
├── README.md
└── ...

目录介绍

• css/: 包含项目的 CSS 文件，其中 material-design-iconic-font.min.css 是主要的 CSS 文件。
• fonts/: 包含项目的字体文件，如 Material-Design-Iconic-Font.woff2。
• less/: 包含项目的 LESS 文件，其中 _variables.less 是用于自定义的变量文件。
• scss/: 包含项目的 SCSS 文件，其中 _variables.scss 是用于自定义的变量文件。
• LICENSE: 项目的许可证文件。
• README.md: 项目的说明文档。

2. 项目的启动文件介绍

Material Design Iconic Font 项目的启动文件主要是 css/material-design-iconic-font.min.css。这个文件包含了所有图标的样式定义，可以通过以下方式引入到你的项目中：

<link rel="stylesheet" href="path/to/material-design-iconic-font/css/material-design-iconic-font.min.css">

3. 项目的配置文件介绍

Material Design Iconic Font 项目的配置文件主要是 less/_variables.less 和 scss/_variables.scss。这两个文件包含了用于自定义项目的关键变量。

LESS 配置文件

@md-font-path: "../fonts";

SCSS 配置文件

$md-font-path: "../fonts";

通过修改这些变量，你可以自定义字体文件的路径和其他相关设置。修改后，需要重新编译 LESS 或 SCSS 文件。

示例

假设你下载了项目的源码并解压到你的项目目录中，你可以通过以下步骤进行自定义：

1. 打开 less/_variables.less 或 scss/_variables.scss 文件。
2. 修改 @md-font-path 或 $md-font-path 变量，指向你的字体目录。
3. 重新编译 LESS 或 SCSS 文件。

通过这些步骤，你可以轻松地自定义 Material Design Iconic Font 项目。