天度网络出品
扫描关注网站建设微信公众账号

扫一扫微信二维码

网站图标特殊用法;前端icon图标使用的方法

天度科技o2018-09-15o天度独家分析o

前言:

最近接触了前端开发其中涉及到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引用的方法,欢迎留言交流。

文章关键词
网站,图标,特殊,用法,前端,icon,使,用的,方法,