锐客网

  1. 首页 > 睿知 > it技术 > >

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

后端IT知识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中使用超赞的字体如医学图标

文章图片
因此, 你只需要在文档中包括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个图标, 这些类别是：
  1. 临床与医学
  2. 行政及设施
  3. 影像学
  4. 交通运输部(DOT)
要在你的应用程序中添加图标, 只需将图标的类嵌入到一个空的span元素中：
< span class="medical-icon-laboratory" aria-hidden="true"> < /span>

例如, 使用下面的少量图标列表, 你只需替换上一个元素中的类, 它们将显示所需的图标：
如何在CSS中使用超赞的字体如医学图标

文章图片
如前所述, 该库提供了很多图标, 因此你可以在此处的官方网页上查看它们。
更改图标大小
如果要更改特定图标的大小, 只需使用css指定字体大小即可：
< style> .medical-icon-laboratory {font-size: 7em; }< /style> < span class="medical-icon-laboratory" aria-hidden="true"> < /span>

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

    推荐阅读


    上一篇：215、数组中的第K个最大元素|215、数组中的第K个最大元素 | 算法（leetcode，附思维导图 + 全部解法）300题

    下一篇：如何在没有Imagick的情况下在PHP中调整图像大小并降低质量