先下载fontawesome5.6.3,选择free for web,下载完解压,丢在资源目录下

<form action="">
<div class="form-group">
<div class="input-group">
<input
type="text"
class="form-control"
placeholder="请输入用户名" />
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="formgroup">
<div class="input-group">
<input
type="password"
class="form-control"
placeholder="请输入密码" />
<div class="input-group-append">
<div class="input-group-text">
<i class="fa fa-lock" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</form>

bootstrap4中使用fontawesome5.6.3的更多相关文章

  1. bootstrap4中bootstrap_treeview不显示图标原因以及解决办法

    1.bootstrap4中bootstrap_treeview不显示图标原因 查看过大神的博客,经过自己试验,插件依赖: bootstrap/3.3.7 jquery/3.3.1 <link h ...

  2. 在webpack开发中利用bootstrap4中的字体图标

    在webpack项目开发中,难免会需要一些图标,如果用到bootstrap4的话,就会碰到一些问,因为bootstrap 4.x版本把icon分离出来作为一个单独的项目open-iconic,所以cn ...

  3. Bootstrap4中栅格系统CSS中 col-sm-* col-md-* col-lg-*的意义以及当其同时具有col-xs-* col-sm-* col-md-* col-lg-*的含义

    根据Bootstrap--Grid 中 col-sm-* col-md-* col-lg-* col-xl-*的意义: .col-sm-* 小屏幕 手机 (≥ 576px) .col-md-* 中等屏 ...

  4. 在用vue-cli4创建的vue2.x项目中通过vue-fontawesome使用fontawesome5

    前言 本文写于2020年1月11日,仅提供最基本的引用方法,参考fontawesome5英文官方文档和vue-fontawesome英文官方文档. 正文 在vue项目中使用fontawesome5图标 ...

  5. Bootstrap4 网格系统

    学习注意事项 col-*-* 第一个*是设备类型,第二个*是控件宽度的占比 屏幕被等分为12,col-1宽度是1/12,col-6宽度是50%,col-12宽度是100% 给应用了class的elem ...

  6. CSS、bootstrap4等相关疑难杂症

    说明 本篇博客仅用于个人随笔,所以内容比较随意. 在bootstrap4中,引入样式后,按钮.输入框等组件的选取状态会出现黑色加重边框,该如何解决? 解决示例: input:focus{outline ...

  7. Tensorflow 官方版教程中文版

    2015年11月9日,Google发布人工智能系统TensorFlow并宣布开源,同日,极客学院组织在线TensorFlow中文文档翻译.一个月后,30章文档全部翻译校对完成,上线并提供电子书下载,该 ...

  8. React开发项目例子

    一.需求 1.分析:用react开发一个类似bootstrap4中的card组件http://v4-alpha.getbootstrap.com/components/card/,界面类似如下: 2. ...

  9. JqGrid分页按钮图标不显示的bug

    开发中遇到的一个小问题,记录一下,如果有朋友也遇到了相同的问题,可以少走些弯路少花点时间. 如图: 分页插件使用了JqGrid,但是分页栏里出现了问题,上一页.下一页这些按钮的图标都显示为空,记得以前 ...

随机推荐

  1. [POJ1190]生日蛋糕<DFS>

    题目链接:http://poj.org/problem?id=1190 题看上去确实很复杂 涉及到半径面积这些,其实看着真的很头疼 但是除去这些就是剪枝优化的dfs算法 #include<cst ...

  2. QCustomPlot图形和图例同步方法

    QCustomPlot图形和图例同步前言 我现在有几条折线,折线和图例一一对应,不管点击图例或者折线,相关的都高亮 QCustomPlot图形和图例同步方法 // 链接信号槽 m_plot即为QCus ...

  3. PostgreSql 自定义函数:批量调整某个字段长度

    CREATE or replace FUNCTION alterColumn(cloumnName VARCHAR(32), out v_retcode text)AS$BODY$ declare r ...

  4. 2.Metasploit数据库配置及扫描模块介绍

    01.Metasploit数据库配置及扫描模块介绍     信息收集   信息收集是渗透测试中首先要做的重要事项之一,目的是尽可能多的查找关于目标的信息,我们掌握的信息越多,渗透成功的机会越大.在信息 ...

  5. STM32F103ZET6外部中断

    1.EXTI功能 外部中断/事件控制器EXTI管理了STM32的20个中断/事件线. EXTI的功能框图如下: 在功能框图中,可以看到很多在信号线上打了一个斜杠并标注“20”的字样,这是表示在STM3 ...

  6. ubuntu16.04下安装java8

    从Oracle官网下载jdk,jdk-8u231-linux-x64.tar.gz (1)复制到/opt 目录内 sudo cp jdk-8u231-linux-x64.tar.gz /opt (3) ...

  7. Redis 过期时间相关命令

    命令 示例和描述 PERSIST PERSIST key-name —— 移除键的过期时间 TTL TTL key-name —— 查看给定键距离过期还有多少秒 EXPIRE EXPIRE key-n ...

  8. web自动化浏览器chrome和驱动chromedriver

    1.web自动化下载浏览器和对应的浏览器驱动,以谷歌浏览器为例 电脑上安装谷歌浏览器,查看谷歌浏览器的版本,输入chrome://settings/help 2.chromedriver国内镜像地址h ...

  9. kali2016&2019的安装使用

    先解释一下,为什么要说2016&2019哪,这是因为有一些测试靶机环境在2016以上的系统安装不通过,所以有时候会特意找2016的镜像来用. 一.下载镜像 1.下载镜像当然要到官方去下载了: ...

  10. 如何使你的PPT更高调

    PPT是什么? 俗话说的好,PPT就是"屁屁踢"/笑脸. PPT是微软office三件套之一,也就是演示文稿,用于演示(说了给没说一样). PPT的用途 视觉辅助 自动演示 阅读 ...