頁面特效 UI組件庫 菜單導航 窗口特效 幻燈片滑動 圖像相冊 表單 選項卡 表格 評分星級 手風琴 文本鏈接 布局 日歷 顏色選擇器 按鈕 圖表 html5 提示 ExtJS 在線客服 其他特效 地圖 樹形控件 移動開發 BootStrap 滑動條 文件上傳 表單驗證 分頁 播放器 Angular VUE

Font Awesome精心打造的矢量字體圖標(推薦)

圖標設計 html5 HTML我幫您 1年前  次瀏覽
Font Awesome為您提供了一套可縮放的字體矢量圖標,可以快速自定義圖標的大小,顏色,陰影,這些都可以通過CSS來實現,無需任何的JS代碼哦。這套圖標字體集幾乎囊括了網頁中可能用到的所有圖標,除了包括 Twitter Boostrap 的默認圖標外,還有社交網絡圖標、Web 應用程序圖標和編輯器圖標等等,可以免費用于商業項目。 Font Awesome精心打造的矢量字體圖標 主要特色: 一種字體,439個圖標,是網頁操作的象形語言; 純 CSS 控制,能夠輕松定義圖標的顏色、大小、陰影以及任何 CSS 能夠實現的效果; 無限縮放,矢量圖標在任何尺寸下都一模一樣; 免費使用,包括商業和非商業項目; 支持 Internet Explorer 7 瀏覽器; 能夠在 Retina 屏幕完美呈現; 完全兼容 Twitter Boostrap 最新版本; 對設計師友好,設計師能夠輕松使用; 和其它圖標字體不同,兼容屏幕閱讀器; 使用方法 方式一: 此方法使用最為簡單,BootstrapCDN 方式 在自己網頁的head標簽中引入如下代碼即可,不需要下載和安裝任何東西即可使用:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
方式二: 此方式需要下載 Font Awesome項目文件夾 將Font Awesome 目錄 拷貝到你的項目中,然后在head標簽中引入如下代碼:
<link rel="stylesheet" href=" your project(你的項目路徑)/font-awesome/css/font-awesome.min.css">
使用舉例
<div class="list-group">
  <a class="list-group-item" href="http://www.pluhyn.live"><i class="fa fa-home fa-fw"></i>&nbsp; 首頁</a>
  <a class="list-group-item" href="http://www.pluhyn.live/page"><i class="fa fa-book fa-fw"></i>&nbsp; JQUERY插件庫</a>
  <a class="list-group-item" href="http://www.pluhyn.live/code"><i class="fa fa-pencil fa-fw"></i>&nbsp; 網站源碼</a>
  <a class="list-group-item" href="http://www.pluhyn.live/tools"><i class="fa fa-cog fa-fw"></i>&nbsp; 工具</a>
</div>
輸出顯示:

相關鏈接

發表評論

经典黑杰克游戏 老k棋牌手机版下载地址 中国福利彩票开奖查询 jdb财神捕鱼辅助器 2013年排列三走势图 成都麻将之血战到底 36选7开奖中几个有奖 天天棋牌2 江西时时被停 年轻人做什么最赚钱 山西快乐10分走势图派彩电子 云南快乐10分前三直最大遗漏 广东11选5绝对杀一码 双色球兑奖规则 怎样网上买彩票 1000炮金蟾捕鱼机打法 上海快三开奖结果一定牛