如何引用bootstrap没有的字体图标

boyanx4个月前技术教程14

今天做一个项目,用到了微信图标,要求用图标字体,而bootstrap字体文件中并没有微信的字体图标,怎么办?

一、使用 http://fontawesome.io/icons/网站中的字体:

  1. 引入css文件:

    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

  2. 在html中使用如下格式即可

    <i class="fa fa-weixin"></i>我是微信图标

1是感觉css文件需要加载,怕影响网站打开速度,2是和bootstrap的用法不统一,造成阅读代码困难;

二、使用 https://icomoon.io/app/#/select 网站中的字体:

1、在搜索框中输入搜索:

2、在font awesome 栏可以看到了图标:

3、点击图标:

4、把图标文件下载下来:

5、将下载后的zip文件解压,将其中的font文件夹,拷贝到你css所在的目录;

6、将style.css中的内容全部复制到你css文件中。

7、在你的html上引用css文件中定义的类名即可;

我的建议是大家使用第二种方法,其实它的引用方式和bootstrap的引用差不多。你看看bootstrap中的css源码是怎样引用字体图标的就知道了。

相关文章

保姆级软路由刷机+软路由OpenWRT入门设置,新手轻松搭建软路由

本内容来源于@什么值得买APP,观点仅代表作者本人 |作者:我是阿皮啊-创作立场声明:整理了软路由刷机+入门设置的方法,希望帮到刚入手软路由的小伙伴,轻松搭建软路由~超级详细的搭建过程~开篇碎碎念Hi...

Flink SQL Client综合实战_icc client综合管理平台

在《Flink SQL Client初探》一文中,我们体验了Flink SQL Client的基本功能,今天来通过实战更深入学习和体验Flink SQL;实战内容本次实战主要是通过Flink SQL...

FlinkSQL处理复杂JSON的思路_flinksql kudu

导读:在日常开发中常有这么一个场景,采集如日志等数据后以JSON形式存储到Kafka中,再由Flink从Kafka中获取数据并进行处理。但是有时候JSON比较复杂(多层嵌套),在FlinkSQL中解析...

MySQL高可用架构-MGR(上)_mysql高可用方案推荐

关注我「程序猿集锦」,获取更多分享。前言MGR的介绍MGR的演变过程什么是MGRMGR的工作模式MGR集群的限制环境准备Docker网段的准备MySQL容器的启动MGR插件的安装MGR安装方式一MGR...

后台产品设计规范-Ant Design实践到落地-表单篇

编辑导语:本文作者在对一个电商系统进行系统重构的过程中,发现存在着一些问题,导致各个后台系统的用户体验不统一,与业内优秀的电商系统差距较大。于是决定使用Ant Design Vue这套框架对现有系统再...

基于Confluent+Flink的实时数据分析最佳实践

简介:在实际业务使用中,需要经常实时做一些数据分析,包括实时PV和UV展示,实时销售数据,实时店铺UV以及实时推荐系统等,基于此类需求,Confluent+实时计算Flink版是一个高效的方案。业务背...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。