本文概述
- 1.下载医疗图标包
- 2.在文档中包含wfmi-style.css
- 3.使用图标
1.下载医疗图标包 从图标的官方存储库下载图标包, 然后将其内容提取到某个文件夹中。在此文件夹中, 你将找到packages / webfont-medical-icons目录, 其中包含Web格式的字体和要包含在Web项目中的css文件。有关网络上这些超酷免费医疗图标的更多信息, 请访问Github上的官方存储库或官方主页。
2.在文档中包含wfmi-style.css 重要的是要注意, css文件在父目录(../fonts)中搜索字体, 这意味着你需要以以下方式在项目中包括该软件包(可以明显更改medical_icons, 但是内部结构需要以相同的方式工作)：
文章图片
因此, 你只需要在文档中包括CSS文件即可：
<
link rel="stylesheet" href="http://www.srcmini.com/medical_icons/css/wfmi-style.css">
你现在将能够以与Font Awesome相同的方式在应用程序中使用医疗图标。
3.使用图标 【如何在CSS中使用超赞的字体如医学图标】一旦将wfmi-style.css包含在文档中, 便可以使用文档中库的所有图标。基本上, 每个图标都对应于一个在你的span元素上显示图标的类。该库提供4个类别, 总共可以使用144个图标, 这些类别是：
- 临床与医学
- 行政及设施
- 影像学
- 交通运输部(DOT)
<
span class="medical-icon-laboratory" aria-hidden="true">
<
/span>
例如, 使用下面的少量图标列表, 你只需替换上一个元素中的类, 它们将显示所需的图标：
文章图片
如前所述, 该库提供了很多图标, 因此你可以在此处的官方网页上查看它们。
更改图标大小
如果要更改特定图标的大小, 只需使用css指定字体大小即可：
<
style>
.medical-icon-laboratory {font-size: 7em;
}<
/style>
<
span class="medical-icon-laboratory" aria-hidden="true">
<
/span>
官方页面还提供了一个图标选择器, 可帮助你从库提供的大列表中快速选择所需的图标。
编码愉快！
推荐阅读
- 如何在没有Imagick的情况下在PHP中调整图像大小并降低质量
- 性能优化|前端性能优化-白屏时间(白屏经历了什么&白屏优化方案&CSS性能优化&内联关键CSS)
- 从zip安装android studio时，Windows 10上没有SDK
- Facebook SDK错误'必需'app_id“密钥未在配置中提供
- ERROR ITMS-90502 App Store上传 - Xcode
- Ion Android发送multipart / form-data
- 为什么使用INSERT / * + APPEND * /（）
- IIS让我对app pool用户感到困惑
- 从com.google.android.gms.vision.CameraSource访问相机并增加/减少预览亮度