bootstrap中如何给input添加图标

发布时间：2023-05-18 11:11:47

Bootstrap是一种基于HTML、CSS和JavaScript的开源前端框架，它提供了一系列的CSS样式和JavaScript脚本，可以帮助我们更加快速地构建响应式的Web界面。其中，Bootstrap中提供了一些内置的图标字体，可以使用这些图标字体来为页面中的元素添加图标，比如为input元素添加一个搜索图标。

下面就来具体介绍一下如何在Bootstrap中给input添加图标：

1.引入Bootstrap

首先，我们需要在页面中引入Bootstrap的CSS和JavaScript文件，可以通过以下方式引入：

<!-- 引入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- 引入Bootstrap的JavaScript文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.0/js/bootstrap.min.js"></script>

2.使用内置图标字体

Bootstrap中提供了一些内置的图标字体，可以通过在HTML元素中添加对应的class来使用这些图标字体。

比如，如果我们想要为一个input元素添加一个搜索图标，可以使用内置的"glyphicon glyphicon-search"类，代码如下：

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search">
  <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
</div>

上面的代码中，我们首先使用了一个输入框组（input-group）来将输入框和搜索按钮组合在一起，然后在搜索按钮的span元素中使用了内置的"glyphicon glyphicon-search"类来添加搜索图标。

除了搜索图标之外，Bootstrap还提供了很多其他的图标字体类，比如"glyphicon glyphicon-user"表示用户图标，"glyphicon glyphicon-envelope"表示邮件图标，可以根据需要选择使用。

3.使用自定义图标字体

除了使用内置的图标字体之外，我们还可以使用自定义的图标字体来为input元素添加图标。常见的自定义图标字体有Font Awesome和Ionicons等，这些字体库提供了众多的图标可供选择。

下面以Font Awesome为例，介绍如何为input元素添加图标：

首先，在页面中引入Font Awesome的CSS文件：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

然后，在HTML元素中使用对应的class来添加图标，比如：

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search">
  <span class="input-group-addon"><i class="fa fa-search"></i></span>
</div>

上面的代码中，我们使用了一个输入框组（input-group）将输入框和搜索按钮组合在一起，然后在搜索按钮的span元素中使用了Font Awesome提供的"fa fa-search"类来添加搜索图标。

除了搜索图标之外，Font Awesome还提供了很多其他的图标类，可以在官方网站查看并选择使用。

4.自定义图标

如果我们需要使用自己设计的图标，或者下载一些第三方图标库中的图标，就需要自定义自己的图标字体了。这里以icomoon（一个在线图标字体制作工具）为例，介绍如何自定义图标字体：

首先，在icomoon的官网（https://icomoon.io/）上创建一个新的project，选择需要的图标，然后下载生成的字体文件和CSS文件。

然后，在页面中引入CSS文件，并在HTML元素中使用对应的class来添加图标，比如：

<!-- 引入自定义的字体文件 -->
<link rel="stylesheet" href="path/to/font/iconfont.css">

<!-- 添加图标 -->
<div class="input-group">
  <input type="text" class="form-control" placeholder="Search">
  <span class="input-group-addon"><i class="iconfont icon-search"></i></span>
</div>

上面的代码中，我们首先在页面中引入了自定义的字体文件，然后在搜索按钮的span元素中使用了自定义的"iconfont icon-search"类来添加搜索图标。

需要注意的是，自定义图标字体需要使用webfont格式，可以在icomoon中进行设置。在使用自定义图标字体时，还需要在CSS文件中设置字体文件的路径，可以根据实际情况进行设置。

总结

在Bootstrap中为input添加图标有多种方式，可以使用内置的图标字体、使用第三方图标字体库（比如Font Awesome）或自定义图标字体。无论使用哪种方式，都需要在页面中引入对应的CSS文件，并在HTML元素中使用对应的class来添加图标。添加图标可以增强页面的视觉效果，提升用户体验，因此在实际开发中需要掌握这个技巧。