先下载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. 《JAVA与模式》之责任链模式 【转载】

    转载自java_my_life的博客 原文地址:http://www.cnblogs.com/java-my-life/archive/2012/05/28/2516865.html 在阎宏博士的&l ...

  2. Activiti工作流框架学习笔记(二)之springboot2.0整合工作流Activiti6.0

    以前在工作当中做过不少与工作流Activiti有关的工作,当时都是spring集成activiti5.22的项目,现在回过头去看,其实版本已经稍微老了,因此,基于先前的工作经验,决定用较新版本的技术来 ...

  3. Golang 实现 Redis(4): AOF 持久化与AOF重写

    本文是使用 golang 实现 redis 系列的第四篇文章,将介绍如何使用 golang 实现 Append Only File 持久化及 AOF 文件重写. 本文完整源代码在作者GithubHDT ...

  4. DFS 蜘蛛纸牌(深度解析)

    蜘蛛纸牌 Problem Description 蜘蛛牌是windows xp操作系统自带的一款纸牌游戏,游戏规则是这样的:只能将牌拖到比她大一的牌上面(A最小,K最大),如果拖动的牌上有按顺序排好的 ...

  5. CPU、内存、硬盘、指令之间的关系

    我们都知道所有的程序最终都是一系列计算机能够识别的指令和数据,通过执行这些指令来控制整个计算机. 而CPU就是负责读取和解释执行这些指令的,CPU主要包括运算器.控制器和寄存器,控制器负责把指令.数据 ...

  6. 计算机人推荐书目&网站(不断更新)

    计算机人推荐书目&网站(不断更新) 鉴于最近有很多同学问我学什么读什么书好,我把我自己的经历和愚见写下来,仅供参考.我只会写我亲自读过有感悟的书,而不会搬运一些我碰都没有碰过只闻大名的书.本人 ...

  7. 【tensorflow2.0】数据管道dataset

    如果需要训练的数据大小不大,例如不到1G,那么可以直接全部读入内存中进行训练,这样一般效率最高. 但如果需要训练的数据很大,例如超过10G,无法一次载入内存,那么通常需要在训练的过程中分批逐渐读入. ...

  8. 基于redis的订单号生成方案

    目前,比较火的nosql数据库,如MongoDB,Redis,Riak都提供了类似incr原子行操作. 下面是PHP版的一种实现方式: <?php /** * 基于Redis的全局订单号id * ...

  9. MTK Android 回调机制[CallBack]

    具体步骤: 一.建模 回调函数的关键是:将一段代码作为参数传递,而这段代码将会在某个时刻被执行 我理解的接口回调就是,我这个类实现了一个接口里的方法doSomething,然后注册到你这里,然后我就去 ...

  10. iOS岗位招聘标准水涨船高,五年iOS程序员表示面试太难了

    人才济济的iOS开发者,你凭什么脱颖而出? 与岗位要求相去甚远,如何挑战极限? 想去心怡公司,如何马到成功? 那么,你的绝招是什么呢? 在这个iOS岗位供不应求的市场,对iOS开发者对要求日益增长,面 ...