先下载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. Python命令行执行.py文件提示ModuleNotFoundError:No module named 'XXX'解决办法

    原因:在命令行执行.py文件找不到包是因为我们没有把项目路径保存,可以通过sys.path.append()保存项目路径,执行后就能成功. ############################## ...

  2. 在线诊断工具arthas (windows)

    介绍: arthas是阿里巴巴开发的一款开源的,Java应用程序排查问题的非常好用的工具 当你遇到以下类似问题而束手无策时 arthas 可以帮助你解决: 这个类从哪个 jar 包加载的?为什么会报各 ...

  3. PTA数据结构与算法题目集(中文) 7-25

    PTA数据结构与算法题目集(中文)  7-25 7-25 朋友圈 (25 分)   某学校有N个学生,形成M个俱乐部.每个俱乐部里的学生有着一定相似的兴趣爱好,形成一个朋友圈.一个学生可以同时属于若干 ...

  4. on duplicate key update 的用法说明(解决批量操作数据,有就更新,没有就新增)mybatis批量操作数据更新和添加

    项目用的ORM框架是用springdatajpa来做的,有些批量数据操作的话,用这个效率太低,所以用mybatis自己写sql优化一下. 一般情况,我们肯定是先查询,有就修改,没有就添加,这样的话,单 ...

  5. js之ES6的Class类

    JavaScript ES6之前的还没有Class类的概念,生成实例对象的传统方法是通过构造函数. 例如: function Mold(a,b){ this.a=a; this.b=b; } Mold ...

  6. 尝试用tornado部署django

    import os from tornado.options import options, define from tornado import httpserver from tornado.io ...

  7. Visual Studio2000系列版本安装OpenGL可以这么简单!

    是啥 直接上图 [翻译过来]这个库将各种库添加到您的项目中,这些库在x86和x64架构上构建OpenGL应用程序所必需的.包括FreeGLUT,GLFW和GLEW.也就是说,大家常用的几个OpenGL ...

  8. Android AndroidManifest.xml详解

    AndroidManifest.xml简述: AndroidManifest.xml 是每个android程序中必须的文件.它位于整个项目的根目录,描述了package中暴露的组件(activitie ...

  9. Struts2-学习笔记系列(13)-类型转换异常和校验器

    Struts2框架有默认的类型转换错误拦截机制,该配置在struts-default.xml中,名叫conversionError,但是想使用需要继承ActionSupport. 默认的错误提示信息是 ...

  10. std::forward和std::move

    std::forward完美转发 保证参数原来的属性(用在template的参数是引用的时候):左值引用在被转发之后仍然保持左值属性,右值引用在被转发之后依然保持右值属性 void show(int& ...