先下载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. Codeforces 杂题集 2.0

      记录一些没有写在其他随笔中的 Codeforces 杂题, 以 Problemset 题号排序   1326D2 - Prefix-Suffix Palindrome (Hard version) ...

  2. 使用原生方法查询指定元素是否包含指定className

    如果我们要查找某个指定元素是否包含指定的className,可以使用以下方法 eg:document.getElementById('Id').classList.contains('要查询的clas ...

  3. python爬虫之requests的基础使用

    1.先安装requests库,打开cmd,输入:pip install requests

  4. Android Studio使用butterknife库绑定控件ID注解

    在线导入butterknife的jar包 在Android-app-Open Module Settings下选中module下的app 选择Dependencies,点击右边的“+”,选择第一个:1 ...

  5. HTML+CSS:css定位详解之相对定位、绝对定位和固定定位

    相对定位 如果想为元素设置层模型中的相对定位,需要设置position:relative;,它还是会占用该元素在文档中初始的页面空间,通过left.right.top.bottom属性确定元素在正常文 ...

  6. php 分页使用limit还是用mysql_data_seek()呢?

    目前大部分教程中介绍的时LIMIT方法,使用这种方法要认识到以下几点: (1)limit不是标准的sql语句; (2)如果选择使用limit,那么您就必须首先向数据库发送一个查询语句来获取记录的总数, ...

  7. python--匿名函数、文件操作

    一.匿名函数 语法: sum = lambda arg1, arg2: arg1 + arg2 #调用sum函数 print "Value of total : ", sum( 1 ...

  8. java仿win7计算器布局

    代码: package calculator; import javax.swing.*; import java.awt.*; import java.awt.event.*; public cla ...

  9. Hadoop (六):MapReduce基本使用

    MapReduce原理 背景 因为如果要对海量数据进行计算,计算机的内存可能会不够. 因此可以把海量数据切割成小块多次计算. 而分布式系统可以把小块分给多态机器并行计算. MapReduce概述 Ma ...

  10. Git mergetool 插件

    首先你喜欢使用git命令行操作,可以上网下载Kdiff3安装到你的电脑,然后按下面的操作就可以使用这个工具了. 1. 安装Kdiff3 软件.(最好使用默认路径) 2. 添加kdiff3到git me ...