(新手向)如何引入使用Bootstrap之glyphicons字体图标组件

1.到bootstrap官网下载Bootstrap:点击打开链接(当前最新版本为bootstrap-3.37)

2.我们需要用到的bootstrap提供的css,js,fonts等都能在下载好的bootstrap/dist文件夹里面找到


fonts文件夹里的内容:


3.把dist文件夹下的余下3个文件夹复制到你的项目的根目录下


4.使用图标组件:test.html

首先引入外部bootstrap样式

 <link rel="stylesheet" media="screen" href="css/bootstrap.css">

写一个搜索框:注意观察i标签的样式class

<form method="get" action="#">
	<div class="row">
	<div class="col-lg-3">
		<div class="input-group">
			<input class="form-control"></input>
			<span class="input-group-btn">
				<button class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button> 
			</span>
		</div>
	</div>
	</div>
	</form>

展示一下效果:


注:如果出现图标无法显示的状况

例如这样:

需要查看自己的bootstrap.css文件是否错放在与fonts文件夹同级的文件中了,如下图这样放置文件会导致图标无法正常显示



评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值