bootstrap4中使用fontawesome5.6.3
先下载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的更多相关文章
- bootstrap4中bootstrap_treeview不显示图标原因以及解决办法
1.bootstrap4中bootstrap_treeview不显示图标原因 查看过大神的博客,经过自己试验,插件依赖: bootstrap/3.3.7 jquery/3.3.1 <link h ...
- 在webpack开发中利用bootstrap4中的字体图标
在webpack项目开发中,难免会需要一些图标,如果用到bootstrap4的话,就会碰到一些问,因为bootstrap 4.x版本把icon分离出来作为一个单独的项目open-iconic,所以cn ...
- 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-* 中等屏 ...
- 在用vue-cli4创建的vue2.x项目中通过vue-fontawesome使用fontawesome5
前言 本文写于2020年1月11日,仅提供最基本的引用方法,参考fontawesome5英文官方文档和vue-fontawesome英文官方文档. 正文 在vue项目中使用fontawesome5图标 ...
- Bootstrap4 网格系统
学习注意事项 col-*-* 第一个*是设备类型,第二个*是控件宽度的占比 屏幕被等分为12,col-1宽度是1/12,col-6宽度是50%,col-12宽度是100% 给应用了class的elem ...
- CSS、bootstrap4等相关疑难杂症
说明 本篇博客仅用于个人随笔,所以内容比较随意. 在bootstrap4中,引入样式后,按钮.输入框等组件的选取状态会出现黑色加重边框,该如何解决? 解决示例: input:focus{outline ...
- Tensorflow 官方版教程中文版
2015年11月9日,Google发布人工智能系统TensorFlow并宣布开源,同日,极客学院组织在线TensorFlow中文文档翻译.一个月后,30章文档全部翻译校对完成,上线并提供电子书下载,该 ...
- React开发项目例子
一.需求 1.分析:用react开发一个类似bootstrap4中的card组件http://v4-alpha.getbootstrap.com/components/card/,界面类似如下: 2. ...
- JqGrid分页按钮图标不显示的bug
开发中遇到的一个小问题,记录一下,如果有朋友也遇到了相同的问题,可以少走些弯路少花点时间. 如图: 分页插件使用了JqGrid,但是分页栏里出现了问题,上一页.下一页这些按钮的图标都显示为空,记得以前 ...
随机推荐
- 生产-消费者,C++11实现
C++11中新增加了线程库<thread>和原子操作库<atomic>,使用这两个库可以实现生产——消费者模型.上代码 //生产者生产函数 void product(std:: ...
- 怎么在三层架构中使用Quartz.Net开源项目(与数据库交互)
1.首先在项目中先创建一个控制台应用程序 2.然后右击项目中的[引用],可以[添加引用],也可以[管理NuGet程序包],作者使用的是[添加引用],添加本地应用.版本不同,所使用的方式不同.需要此版本 ...
- MySQL进阶篇(01):基于多个维度,分析服务器性能
本文源码:GitHub·点这里 || GitEE·点这里 一.服务器性能简介 1.性能定义 服务器性能优化是一项非常艰巨的任务,当然也是很难处理的问题,在写这篇文章的时候,特意请教下运维大佬,硬件工程 ...
- [教程]KALI LINUX 2.0 2019 更新国内源
2019年最新版本KALI 为 KALI 2019.1 下载地址:https://www.kali.org/downloads/ 有的新入门的朋友可能会问,为什么每次都无法手动更新 例如:Update ...
- 通俗易懂.NET GC垃圾回收机制(适用于小白面试,大牛勿喷)
情景:你接到xx公司面试邀请,你怀着激动忐忑的心坐在对方公司会议室,想着等会的技术面试.技术总监此时走来,与你简单交谈后.... 技术:你对GC垃圾回收机制了解的怎么样? 你:还行,有简单了解过. 技 ...
- git使用基本步骤
一.Git配置环境: 1.通过git init命令把某个目录变成Git可以管理的仓库: 2.生成公钥秘钥:ssh key ssh-keygen -t rsa -C "for example@ ...
- mui在vue_cli上使用
在main.js里添加 import mui from './assets/js/mui.js' 如果不添加下面会显示mui is not defined 报错 Vue.prototype.mui = ...
- 为什么要学习Oracle技术?
为什么要学习Oracle技术? 众所周知,Oracle占据着企业数据库领域超过48.1%的市场份额,成为高端企业数据库软件的绝对领导者.随着时间的推移,企业数据库的规模不断扩大,富有经验的资深Orac ...
- Python GUI——tkinter菜鸟编程(中)
8. Radiobutton 选项按钮:可以用鼠标单击方式选取,一次只能有一个选项被选取. Radiobutton(父对象,options,-) 常用options参数: anchor,bg,bitm ...
- 编译安装inotify-tools和监控inotifywait事件
编译安装inotify-tools软件包 1)解包inotify-tools-3.13.tar.gz文件 [root@svr7~]#ls inotify-tools- ...