在html中使用fontIcon 的圖示

阿新 • • 發佈：2019-01-17

聽說fontIcon 顯現圖形比 img要高。然後它是以向量圖的相似呈現，放大不會失真。在今天開發中發現，公司有人使用了這項技術。。所以也就花時間學習了一下。。

在學過程中看了幾篇文章之後完成的。。這裡也推薦下：

2 http://iconfont.cn/ 阿里圖形庫, 這裡提供了很多圖形源，可以通過這個地方下載SVG 檔案到 iconmoon 進行轉化。

html引用程式碼片段

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  
  <!--通過樣式引入 font icon 圖示-->
  <link rel="stylesheet" href="font/iconfont.css"></link>

  <style type="text/css">
    ul li{
    	cursor: pointer;
    	list-style-type: none;
    	line-height: 30px;
    }
  </style>

  
  <style>
    @font-face {
		font-family: 'icomoon';
		src:    url('fonts/icomoon.eot?b7b2qy');
		src:    url('fonts/icomoon.eot?b7b2qy#iefix') format('embedded-opentype'),
			url('fonts/icomoon.ttf?b7b2qy') format('truetype'),
			url('fonts/icomoon.woff?b7b2qy') format('woff'),
			url('fonts/icomoon.svg?b7b2qy#icomoon') format('svg');
		font-weight: normal;
		font-style: normal;
	}

    
    /*通過樣式加 content呈現圖示 如：  <i class="iconfont"></i> */
	[class^="icon-"], [class*=" icon-"] {
		/* use !important to prevent issues with browser extensions that change fonts */
		font-family: 'icomoon' !important;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;

		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	 /*通過樣式呈現圖示  <i class="icon-im"></i> */
	.icon-im:before {
		content: "\e900";
	}

 
  </style>
 </head>
 <body>
     <ul>
	    

       <li>
	     <!--通過樣式加 content呈現圖示-->
		 <i class="iconfont"></i>
		</li>

       <li>
	     <!--通過樣式呈現圖示-->
		 <i class="icon-im"></i> 
	   </li>
	   <li>天貓</li>
       <li>京東</li>
       <li> 3g  </li>
       <li> 4g  </li>
       
       <li>
         <input type="radio" name="t">速率
         <input type="radio" name="t">時延
       </li>
       <li>地圖  </li>
     </ul>
 </body>
 
</html>

難點：

1 如何獲取SVG 格式的向量圖

2 如何將SVG 的圖示繫結地址如：\e900 如如何來得？

3 轉化編輯工具的選擇，網上有很多，安裝檔案很大。選擇是個麻煩的事情

具體操作步驟：

1 去http://iconfont.cn/ 相簿找一個圖示，然後以SVG格式下載下來。

2 通過icommon 教程瞭解如何使用它

3 利用icommon 線上工具將你的SVG 轉化為需要的格式，最後下載轉化完成的包

4 參考裡面的demo 引用圖示。。

在html中使用fontIcon 的圖示

聽說fontIcon 顯現圖形比 img要高。然後它是以向量圖的相似呈現，放大不會失真。在今天開發中發現，公司有人使用了這項技術。。所以也就花時間學習了一下。。在學過程中看了幾篇文章之後完成的。。這裡也推薦下： 2 http://iconfont.cn/ 阿里

SVG轉換成字型，把圖示做字型在HTML中使用

開啟Iconfont-阿里巴巴向量圖示庫的首頁，在阿里裡面可以把svg轉成字型格式，生成字型檔案和css檔案；使用的時候，在專案中引用字型檔案，和css，在html中，加上字型圖示的樣式名就可以了。網站生成的css檔案，裡面引入了網站生成的圖示字型檔案，當在自己寫的檔案裡，引入生成的cs

HTML中引入阿里Unicode圖示

@[HTML引入阿里Unicode圖示]a HTML引入阿里Unicode圖示暑假的時候剛開始使用阿里的Unicode圖示，但有時候總是載入不出來，後來不知道怎麼回事好了，就沒有再去研究他，最近又有用到這個圖示，所以又重新看了一下；我覺得大家可能會有和我一樣的

Html中嵌套其他HTML文件的幾種方法（轉）

java mar net rip gin bsp ace wid style 給大家整理了3個方法，一個是HTML的iframe標簽，別兩個是JS引用。比如要在arr.html文件裏引用index.html文件，方法如下。 HTML引用方法： <iframe na

html中的img ，a ，select的使用

amp lang title 出現 size select selected -i das <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

<script>標簽在html中書寫位置區別

鼠標標識初始化 pan 初始 filter script 出錯 ava 1. 將JavaScript標識放置<Head>... </Head>在頭部之間，使之在主頁和其余部分代碼之前預先裝載，從而可使代碼的功能更強大；比如對*.js文件的提前調

Html中居中問題小結

center 圖片 middle 元素一:文字（行內元素）在塊盒子（塊元素）中水平居中:text-aligh:center;二:文字(行內元素)在塊盒子（塊元素）中垂直居中：設定行高等於盒子高例如: height:30px-------->line-height:30px;三：塊

HTML中Float和元素定位

分層 tom 依據 none 單位正常對象 ott 目前　　浮動 1、float屬性——浮動　　float：left；float：right；float：none； 2、清除浮動——clear 　　Clear：left\right\both\none 3、溢出處

HTML中Css補充資料

... head 交集 styles 拓展網頁 class 後代選擇器 link 3種樣式表　　內部樣式表在<head></head>中 <style type="text/css">......</style>定義不同的

HTML中Css詳細介紹

維護類型 html 外部 -html css樣式樣式表作用 tex 一、樣式表的作用　　1、Css樣式表，層疊樣式表　　2、類似於人類的衣服，網頁的衣服　　3、作用：美化網頁　　4、優勢：　　　　1.內容與表現分離，便於維護　　　　2.樣式豐富，頁面布局靈活　　

JavaScript高級程序設計（2）在HTML中使用JavaScript

有效頁面 itl 延遲腳本文件包含其他 amp 體驗 url 本章內容：使用<script>元素、嵌入腳本與外部腳本、文檔模式對JavaScript的影響、考慮禁用JavaScript的場景。 1.<script>元素向HTML頁面中

HTML中的超鏈接

超鏈接超鏈接：也叫URL（Uniform Resource Locator），就是統一資源定位器。一般效果是我們點擊網頁上某個地方，網頁會自動跳轉到另外一個地方。一般鏈接遵循以下要求：s c h e me://host.domain:port/path/filename比如W3C的網站地址為： h tt p:

html中滾動小球的demo

tor cnblogs 技術 callback yellow animation {} con out 類似於下圖的效果：代碼： 1 <!DOCTYPE html> 2 3 <html> 4 <head>

HTML 中 SELECT 選項分組

選項 htm blog 選擇 light ava type scrip cte <select name="viewType"> <option value selected>選擇排序/顯示方式</option> <opt

html中相對(relative)，絕對(absolute)位置以及float的學習和使用案例（轉）

邊距 col top 20px pre 其他 fff 例如 pan 這幾天著手於CSS的研究，研究的原因主要是工作需要，最近發現如果做前端僅僅會javascript很難盡善盡美，當然懂樣式和html在一定程度上可以讓我們更近一步。 css較為簡單，由於個人擅長編寫代碼，所以

HTML中的顏色簡寫

個數 text 所有 html 基於單標簽進制數紅色效果 1.HTML中顏色的五種寫法 1）直接用顏色英文名字表示例如表示背景顏色為白色； 2.通過16進制數表示例如表示背景顏色為黑色 3）.通過RGB方式表示　　RGB：是紅色（red）綠色（green）藍色

移動端-處理後臺傳過來的html中圖片的顯示

load win col var 後臺移動端 ner code doc function DealWithImg() { var width = 0; if (window.screen.width) {

html中實現數據的顯示和隱藏

func 隱藏 obj else content cli solid head utf Author： YangQingQing <!DOCTYPE html><html><meta http-equiv="Content-Type" co

html中select的onchange打開方式

選擇 option chang onchange change 一個 window 頁面窗口在做網站的時候，常常會用到下拉菜單來打開一個窗口，下拉菜單有2種打開方式，分別是在當前頁面打開和在新窗口打開。select新窗口打開：<select onchange="

使用python寫自動執行腳本並將結果返回到html中

自動上線終於在今天完成了django項目開發的一個小項目，使用python寫一個自動化上線的項目。使用到了python3.5，django 1.11.2，ansible，centos7。功能描述如下： 1、使用網頁點擊要上線的項目 2、在後臺系統執行過程中瀏覽器等待後臺命令調用

在html中使用fontIcon 的圖示

相關推薦