先下载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. 生产-消费者,C++11实现

    C++11中新增加了线程库<thread>和原子操作库<atomic>,使用这两个库可以实现生产——消费者模型.上代码 //生产者生产函数 void product(std:: ...

  2. 怎么在三层架构中使用Quartz.Net开源项目(与数据库交互)

    1.首先在项目中先创建一个控制台应用程序 2.然后右击项目中的[引用],可以[添加引用],也可以[管理NuGet程序包],作者使用的是[添加引用],添加本地应用.版本不同,所使用的方式不同.需要此版本 ...

  3. MySQL进阶篇(01):基于多个维度,分析服务器性能

    本文源码:GitHub·点这里 || GitEE·点这里 一.服务器性能简介 1.性能定义 服务器性能优化是一项非常艰巨的任务,当然也是很难处理的问题,在写这篇文章的时候,特意请教下运维大佬,硬件工程 ...

  4. [教程]KALI LINUX 2.0 2019 更新国内源

    2019年最新版本KALI 为 KALI 2019.1 下载地址:https://www.kali.org/downloads/ 有的新入门的朋友可能会问,为什么每次都无法手动更新 例如:Update ...

  5. 通俗易懂.NET GC垃圾回收机制(适用于小白面试,大牛勿喷)

    情景:你接到xx公司面试邀请,你怀着激动忐忑的心坐在对方公司会议室,想着等会的技术面试.技术总监此时走来,与你简单交谈后.... 技术:你对GC垃圾回收机制了解的怎么样? 你:还行,有简单了解过. 技 ...

  6. git使用基本步骤

    一.Git配置环境: 1.通过git init命令把某个目录变成Git可以管理的仓库: 2.生成公钥秘钥:ssh key ssh-keygen -t rsa -C "for example@ ...

  7. mui在vue_cli上使用

    在main.js里添加 import mui from './assets/js/mui.js' 如果不添加下面会显示mui is not defined 报错 Vue.prototype.mui = ...

  8. 为什么要学习Oracle技术?

    为什么要学习Oracle技术? 众所周知,Oracle占据着企业数据库领域超过48.1%的市场份额,成为高端企业数据库软件的绝对领导者.随着时间的推移,企业数据库的规模不断扩大,富有经验的资深Orac ...

  9. Python GUI——tkinter菜鸟编程(中)

    8. Radiobutton 选项按钮:可以用鼠标单击方式选取,一次只能有一个选项被选取. Radiobutton(父对象,options,-) 常用options参数: anchor,bg,bitm ...

  10. 编译安装inotify-tools和监控inotifywait事件

                     编译安装inotify-tools软件包 1)解包inotify-tools-3.13.tar.gz文件 [root@svr7~]#ls inotify-tools- ...