bootstrap4中使用Font Awesome图标

bootstrap4中默认取消了Font Awesome图标的应用,所以如果要使用相关图标就需要我们自己手动添加,具体步骤如下:

1.下载Font Awesome 下载地址

基本图标下载免费版就可以了。下载 free for web`

2.将下载的文件解压到bootstrp4目录中

3.在html页面中添加引用,引用css文件夹中 all.css`

<link rel="stylesheet" href="fontawesome-free-5.11.2-web/css/all.css">

4.在页面中使用Font Awesome图标

<i class="fas fa-camera"></i>

5.看看效果

另外还可以在Font Awesome搜索自己需要的图标,并查看用法。

如果你下载的包中不包含该图标,可将图标svg文件下载下来,并拷贝至 svg 文件夹中再进行引用即可。

又可以愉快的玩耍了!??

原文地址:https://www.cnblogs.com/ihappycat/p/11781163.html

时间: 2024-10-10 13:02:17

bootstrap4中使用Font Awesome图标的相关文章

在WPF应用程序中使用Font Awesome图标

Font Awesome 在网站开发中,经常用到.今天介绍如何在WPF应用程序中使用Font Awesome . 如果是自定义的图标字体,使用方法相同. 下载图标字体 在官方网站或github上下载资源 http://fontawesome.io/#modal-download https://github.com/FortAwesome/Font-Awesome 解压下载的文件(我是在github上下载的源码),我们要使用的是其中css和fonts文件夹中的内容 在项目中加入字体 新建WPF应

在Qt中使用Font Awesome图标

做过Web前端开发的一定对Font Awesome不会陌生,Font Awesome号称是为Bootstrap设计的完美图标字体,经常出现在各类网页中,非常流行. 这么好的资源,能不能在Qt应用程序中使用呢?答案是肯定的.而且使用起来非常简单. 1. 先来了解下 Font Awesome 的一些特性: 更多关于Font Awesome可以前往其官网[了解详情]. 2. 下载 Font Awesome(本示例使用的是Font-Awesome-3.2.1版) 解压后得到的文件如下: [font]目录

[mobile angular ui]MAUI中的font awesome图标

MAUI中用font awesome替换了glyphicon,但是FA中都有哪些可用的图标呢,在网上搜了一张font awesome的对照表,使用时记着把其中的icon-xxx替换为fa-xxx就可以了. 此外,在MAUI中,还支持7个级别大小的图标显示,只添加".fa"是基本大小,另外的六种图标尺寸需要添加的类分别为:".fa-lg",".fa-2x",".fa-3x",".fa-4x",".f

如何在photoshop等图像编辑软件中使用Font Awesome字体图标

1.首先要下载Font Awesome字体,解压后在fonts文件夹中找到FontAwesome.otf文件,双击安装字体.如下图: 2.重启你的photoshop或者其他图像编辑软件,确保字体被软件载入. 3.在Font Awesome4.2.0所有字体图标参考页面找到你想要的图标,(注意:是图标而不是class样式),将其复制.如图: 4.回到photoshop,将其粘贴在画布上,这时得到的是一个乱码选择"字体工具",选择这个字体图标,然后在字体选项中选择Font Awesome字

在web.config文件中,增加“type=&quot;APP.Modules.CommandModule,CommandModules&quot;”节点会导致awesome font字体图标显示为方框框

在配置文件中,增加以下节点,会造成awesome font字体图标不显示 <system.webServer> <modules> <add type="APP.Modules.CommandModule,CommandModules" name="CommandModule" /> </modules> </system.webServer> 解决办法:将上述节点去掉,即可.

Font Awesome图标字体应用及相关

作为web开发者,难免要经常要用到些小图标,给自己web增添几分活力和多样性.像这些: 而Font Awesome刚好为我们提供了这些.到目前为止,Font Awesome提供了有500多个可缩放的的矢量图标,并且可以使用css所提供的所有特性对这些图标进行更改,包括:大小.颜色.阴影或者其他任何支持的效果.这些图标基本涵盖了web开发者的基本需求,并且Font Awesome还在不断维护更新,提供新的图标,以供开发者使用. 在此,主要介绍一下Font Awesome图标字体的基本使用. 到Fo

在网页中画Icon小图标

在网页中画Icon小图标. 现代网页中,绝大部分都采用了Icon小图标的方式.其积分大致分为三类,CSS Sprite,font+HTML,font+CSS. CSS Sprite:又称为CSS雪碧,把网页中零星背景图片整合在一张图片文件夹中,再利用CSS的背景图片技术定位到要显示的位置.优点:减少文本体积和服务器请求次数,从而提高效率. 知识点:background-image background-position(向下向右取的是负值). 特点:1,相对单个图标,节省文本体积和服务器请求次数

获取 window任务栏已经打开应用程序窗口(也就是任务管理器中前台进程)的图标

获取 window任务栏已经打开应用程序窗口(也就是任务管理器中前台进程)的图标 1.功能描述 获取到window任务栏已经打开的应用程序的窗口图标.如下:(要获取到QQ,浏览器,文件夹的图标,但是任务栏中隐藏的图标不显示) 2.使用技术及工具 JAVA,JNA,eclipse. 需要去下载JNA的包(一个是jna.jar,一个时jna-platform.jar):包的下载在文章结尾提供地址. 3.实现思路 (1).一个window任务栏打开的应用程序也就是一个前台进程,所以先通过JNA获取所有

CSS:在input、pre中左边加上一个图标(一行和多行)

前言 接触过EasyUI的朋友都知道其警告框就是左边有个三角警告图标,此文所做的效果正是这样.此外,还将示例多行的做法. 一.在input左边加上一个图标(一行) 注:left center定义了图标的位置:transparent定义了背景颜色为透明( background-color的默认值) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht