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 图标的样式,以适应不同的项目需求。