Fontisto 开源项目使用教程

Fontisto 开源项目使用教程

fontistoThe iconic font and CSS toolkit. Fontisto gives you scalable vector icons that can instantly be customized: size, color, drop shadow and anything that can be done with the power of CSS.项目地址:https://gitcode.com/gh_mirrors/fo/fontisto

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

Fontisto 项目的目录结构如下：

├── css/
│   ├── fontisto/
│   ├── fontisto.css
│   ├── fontisto.css.map
│   ├── fontisto.min.css
│   └── fontisto.min.css.map
├── less/
│   ├── fontisto/
│   ├── fontisto.less
│   ├── variables.less
│   ├── color.less
│   ├── font.less
│   ├── icons.less
│   ├── animated.less
│   ├── list.less
│   ├── bordered.less
│   ├── rotated.less
│   ├── stacked.less
│   ├── fixed-width.less
│   └── screen-readers.less
├── sass/
│   ├── fontisto/
│   ├── fontisto.scss
│   ├── _variables.scss
│   ├── _color.scss
│   ├── _font.scss
│   ├── _icons.scss
│   ├── _animated.scss
│   ├── _list.scss
│   ├── _bordered.scss
│   ├── _rotated.scss
│   ├── _stacked.scss
│   ├── _fixed-width.scss
│   └── _screen-readers.scss
├── stylus/
│   ├── fontisto/
│   ├── fontisto.styl
│   ├── variables.styl
│   ├── color.styl
│   ├── font.styl
│   ├── icons.styl
│   ├── animated.styl
│   ├── list.styl
│   ├── bordered.styl
│   ├── rotated.styl
│   ├── stacked.styl
│   ├── fixed-width.styl
│   └── screen-readers.styl

目录结构介绍

• css/: 包含编译后的 CSS 文件，包括未压缩和压缩版本。
• less/: 包含 LESS 源文件，用于生成 CSS 文件。
• sass/: 包含 Sass/Scss 源文件，用于生成 CSS 文件。
• stylus/: 包含 Stylus 源文件，用于生成 CSS 文件。

2. 项目的启动文件介绍

Fontisto 项目的启动文件主要是 CSS 文件，具体包括：

• css/fontisto.css: 未压缩的 CSS 文件，包含所有样式和图标定义。
• css/fontisto.min.css: 压缩后的 CSS 文件，用于生产环境，减少文件大小和加载时间。

启动文件介绍

• fontisto.css: 包含了所有图标的样式定义，可以直接在 HTML 文件中引用。
• fontisto.min.css: 是 fontisto.css 的压缩版本，适用于生产环境，减少网络传输时间。

3. 项目的配置文件介绍

Fontisto 项目的配置文件主要位于 LESS、Sass 和 Stylus 目录中，具体包括：

• less/variables.less: 包含 LESS 变量定义，用于自定义样式。
• sass/_variables.scss: 包含 Sass 变量定义，用于自定义样式。
• stylus/variables.styl: 包含 Stylus 变量定义，用于自定义样式。

配置文件介绍

• variables.less: 定义了 LESS 中的变量，如颜色、字体大小等，可以通过修改这些变量来自定义样式。
• _variables.scss: 定义了 Sass 中的变量，如颜色、字体大小等，可以通过修改这些变量来自定义样式。
• variables.styl: 定义了 Stylus 中的变量，如颜色、字体大小等，可以通过修改这些变量来自定义样式。

通过修改这些配置文件中的变量，可以轻松地自定义 Fontisto 图标的样式，以适应不同的项目需求。

fontistoThe iconic font and CSS toolkit. Fontisto gives you scalable vector icons that can instantly be customized: size, color, drop shadow and anything that can be done with the power of CSS.项目地址:https://gitcode.com/gh_mirrors/fo/fontisto