如何在CSS中使用超赞的字体如医学图标

本文概述

• 1.下载医疗图标包
• 2.在文档中包含wfmi-style.css
• 3.使用图标

在某些应用程序中, 例如与医院相关的软件, 你将需要使用适合客户需求的图标。尽管在开源世界中谈论医学图标时没有太多选择, 但是可以肯定的是, 你可以使用并以与Font Awesome相同的方式工作。在这篇小文章中, 我们想与你分享与医学界有关的Web图标的开源集合, 以及如何在你的Web项目中使用它们, 请尽情享受！

1.下载医疗图标包

从图标的官方存储库下载图标包, 然后将其内容提取到某个文件夹中。在此文件夹中, 你将找到packages / webfont-medical-icons目录, 其中包含Web格式的字体和要包含在Web项目中的css文件。有关网络上这些超酷免费医疗图标的更多信息, 请访问Github上的官方存储库或官方主页。

2.在文档中包含wfmi-style.css

重要的是要注意, css文件在父目录(../fonts)中搜索字体, 这意味着你需要以以下方式在项目中包括该软件包(可以明显更改medical_icons, 但是内部结构需要以相同的方式工作)：

因此, 你只需要在文档中包括CSS文件即可：

<link rel="stylesheet" href="medical_icons/css/wfmi-style.css">

你现在将能够以与Font Awesome相同的方式在应用程序中使用医疗图标。

3.使用图标

一旦将wfmi-style.css包含在文档中, 便可以使用文档中库的所有图标。基本上, 每个图标都对应于一个在你的span元素上显示图标的类。该库提供4个类别, 总共可以使用144个图标, 这些类别是：

1. 临床与医学
2. 行政及设施
3. 影像学
4. 交通运输部(DOT)

要在你的应用程序中添加图标, 只需将图标的类嵌入到一个空的span元素中：

<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>

官方页面还提供了一个图标选择器, 可帮助你从库提供的大列表中快速选择所需的图标。

编码愉快！