WebFont Medical Icons 项目使用教程

包椒浩Leith

于 2024-08-25 08:46:49 发布

阅读量583

点赞数 21

本文链接：https://blog.csdn.net/gitblog_00362/article/details/141518592

版权

WebFont Medical Icons 项目使用教程

webfont-medical-iconsWebFont Medical Icons - 72 ICONS (X2) specialized in the Clinical & Medical world FREE and easy to use!项目地址:https://gitcode.com/gh_mirrors/we/webfont-medical-icons

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

WebFont Medical Icons 项目的目录结构如下：

webfont-medical-icons/
├── css/
│   └── wfmi-style.css
├── fonts/
│   ├── webfont-medical-icons.eot
│   ├── webfont-medical-icons.svg
│   ├── webfont-medical-icons.ttf
│   └── webfont-medical-icons.woff
├── icons/
│   ├── medical-icon-alternative-complementary.png
│   ├── medical-icon-kidney.png
│   ├── ...
│   └── medical-icon-health-services.png
├── js/
│   └── icon-selector.js
├── .gitattributes
├── .gitignore
├── .htaccess
├── 404.html
├── LICENSE
├── README.md
├── apple-touch-icon-precomposed.png
├── bower.json
├── favicon.ico
├── humans.txt
├── icon-selector.html
├── index.html
└── package.json

目录介绍

css/：包含项目的样式文件 wfmi-style.css。
fonts/：包含项目的字体文件，包括 eot, svg, ttf, woff 格式。
icons/：包含项目的图标文件，以 PNG 格式存储。
js/：包含项目的 JavaScript 文件 icon-selector.js。
.gitattributes 和 .gitignore：Git 配置文件。
.htaccess：Apache 服务器配置文件。
404.html：404 错误页面。
LICENSE：项目许可证文件。
README.md：项目说明文件。
apple-touch-icon-precomposed.png：苹果设备图标。
bower.json：Bower 包管理文件。
favicon.ico：网站图标。
humans.txt：项目贡献者信息。
icon-selector.html：图标选择器页面。
index.html：项目主页。
package.json：Node.js 包管理文件。

2. 项目的启动文件介绍

项目的启动文件是 index.html，它是项目的主页，包含了项目的基本信息和使用示例。

`index.html` 文件内容简介

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebFont Medical Icons</title>
    <link rel="stylesheet" href="css/wfmi-style.css">
</head>
<body>
    <h1>WebFont Medical Icons</h1>
    <p>使用示例：</p>
    <span class="medical-icon-neurology" aria-hidden="true"></span>
    <script src="js/icon-selector.js"></script>
</body>
</html>

启动步骤

下载项目代码。
在浏览器中打开 index.html 文件，即可看到项目主页和使用示例。

3. 项目的配置文件介绍

`bower.json`

bower.json 是 Bower 包管理文件，用于管理项目的依赖。

{
  "name": "webfont-medical-icons",
  "version": "1.0.0",
  "authors": [
    "Sam Come <samcome@gmail.com>"
  ],
  "description": "WebFont Medical Icons - 72 ICONS (X2) specialized in the Clinical & Medical world",
  "main": "css/wfmi-style.css",
  "keywords": [
    "icons",
    "font",
    "medical",
    "clinical"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}