前端icon图标使用的方法分享

最新推荐文章于 2025-06-18 17:09:56 发布

weixin_33985507

最新推荐文章于 2025-06-18 17:09:56 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript python ViewUI

原文链接：https://my.oschina.net/aichirou/blog/777260

本文介绍如何使用Bootstrap原生图标及阿里iconfont图标增强前端界面设计。通过实例展示了图标在按钮和菜单中的应用，并对比了两种图标的优劣。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

前言：

最近接触了前端开发其中涉及到icon图标的使用，遇到了问题在解决的过程中接触到原生bootstrap图标的应用和阿里icon font的引用，对比两种应用的方法，写下文章提醒自己也方便其他人学习。关于icon图标的优点如下：

大小可以随着需求自由地变化
颜色包括白底黑底
支持添加阴影特效
*IE6也可以支持
支持一些CSS3对文字的效果
字体文件比图片文件小很多，加快加载速度

1、bootstrap原始图标的引用：

官方文档提供的方法：

http://getbootstrap.com/2.3.2/base-css.html#icons

部署环境：

首先下载bootstrap后解压，在上层目录创建新HTML文件：

在test_icon文件设置基本的格式：

      这里注意的是头部需要引入bootstrap的css文件：

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

      或者：

        <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">

设置icon图标的基本语句为：

 <i class="icon_class_name"></i>

其中 "icon_class_name" 是在 bootstrap.css 中定义的图标 class 的名称（例如：icon-music、icon- star、icon-user 等）。如果您想要使用白色图标，然后添加一个额外的 icon-white class。

<i class="icon_class_name icon-white"></i>  </i>

接下来设置简单的div看一下效果，在button前加入图标：

<div class="row">
		<div class="span12">
			<form class="well form-search">
				<input type="text" class="input-medium search-query">
				<button type="submit" class="btn"><i class="icon-search"></i> 搜索</button>
			</form>
		</div>
	</div>

在浏览器打开效果如下：

接下来尝试制作菜单引入icon图标：

<div class="row">
				<div class="span6">
					<button type="button" class="btn btn-default btn-lg">
				     <i class="icon-star"></i> Star
                    </button>
                </div>
		        <div class="span6">
		        	 <div class="nav-collapse">
							<ul class="nav">
								<li class="active"><a href="#"><i class="icon-home"></i> Home</a></li>
								<li><a href="#"><i class="icon-user"></i> User</a></li>
								<li><a href="#"><i class="icon-download"></i> Downlaod</a></li>
								<li><a href="#"><i class="icon-upload"></i> Upload</a></li>
								<li><a href="#"><i class="icon-play-circle "></i> Play Circle</a></li>
								<li><a href="#"><i class="icon-bookmark "></i> Bookmark</a></li>
								<li><a href="#"><i class="icon-gift"></i> Gift</a></li>
							</ul>
						</div>
		        </div>

row属性以及sapn属性是bootstrap的栅格系统在此不做展开。如果我们需要其他图标的话要到哪里去找呢？我的办法是F12。在浏览器中检查代码查看样式可以看到：

在bootstrap里css查找2332行可以看到：

于是我们就可以很容易的查找到自己需要的图标的icon属性的名称了。到这里原生icon图标的使用基本就结束了。

2、阿里icon font字库的使用：

准备：

打开阿里巴巴矢量图标网址：http:// http://www.iconfont.cn/plus，选择三种登录方式其中之一。选择需要的图标并加入库：

可以选择常用的图标都加入库里方便日后使用，官方推荐了三种方法，在这里使用第二种font-class引用。选好需要的图标加入库后进入库，选择font-class，如图：

使用：

点击在线链接获得链接，在项目头部引入外部文件，使用link标签：

<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_8xxxxxxvi.css">

使用标签语法是：<i class="iconfont icon-xxx"></i>，对应的属性可以查看自己的库然后copy。现在尝试制作含有相机图标的按钮，代码如下：

<div class="span4">
  <button type="submit" class="btn"><i class="iconfont icon-camera"></i> 相机</button>
</div>

浏览器查看效果如下：

3、小结：

bootstrap提供的图标基本支持日常使用需求，但是随着设计的丰富很多标签需要引入外部设计好的图标，阿里矢量化图标库就是很好的来源。所以，更推荐使用阿里矢量化的方法，另外，官方推荐的第三种多色图标的使用更加丰富表现形式，可以定制样式，满足个性化需求。不过个人目前还不能很熟练的运用symbol引用的方法，欢迎留言交流。（本文仅限发表在开源中国，保留一切权利，转载联系本人，侵权必究！）

转载于:https://my.oschina.net/aichirou/blog/777260