前端icon圖標使用的方法分享

前言：

最近接觸了前端開發其中涉及到icon圖標的使用，遇到了問題在解決的過程當中接觸到原生bootstrap圖標的應用和阿里icon font的引用，對比兩種應用的方法，寫下文章提醒本身也方便其餘人學習。關於icon圖標的優勢以下：

• 大小能夠隨着需求自由地變化
• 顏色包括白底黑底
• 支持添加陰影特效
• *IE6也能夠支持
• 支持一些CSS3對文字的效果
• 字體文件比圖片文件小不少，加快加載速度

一、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圖標的使用基本就結束了。

二、阿里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>

        瀏覽器查看效果以下： 

 

三、小結：

        bootstrap提供的圖標基本支持平常使用需求，可是隨着設計的豐富不少標籤須要引入外部設計好的圖標，阿里矢量化圖標庫就是很好的來源。因此，更推薦使用阿里矢量化的方法，另外，官方推薦的第三種多色圖標的使用更加豐富表現形式，能夠定製樣式，知足個性化需求。不過我的目前還不能很熟練的運用symbol引用的方法，歡迎留言交流。（本文僅限發表在開源中國，保留一切權利，轉載聯繫本人，侵權必究！）