jQuery Mobile如何引用Font Awesome Icons

安卓webApp学习之路二

在《jQuery Mobile 权威指南》书中,告诉了我们如何引用图标,但是jQuery Mobile给的图标种类太少了,完全不能满足实际需求。于是网上找了一下,有没有免费的图标,皇天不负有心人,终于找到了一个,那就是Font Awesome。说实话它的图片多的让我大吃一惊,虽然是黑白图标,但是它是免费的,真的很不错。

现在考虑工程如何引用它的图标,首先到官网下载它的文件包(我已经下载好了,上传到csdn,下面有地址),解压文件,将fonts文件整个复制到工程里,并且把css文件夹里的font-awesome.min.css文件复制到工程里(用font-awesome.css也是可以的)。

接着,在网页上引用它的css,和引用别的css方法一样的:

<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css"/>

在你需要图标的地方,写上:

<i class="fa fa-github fa-fw"></i>

整个就是:

<a href="http://fanxingwufeng.github.io/" rel="external" data-role = "button"><i class="fa fa-github fa-fw"></i> 我的github</a>

下载地址:http://download.csdn.net/detail/u012157999/8667193

时间: 2024-10-12 00:01:22

jQuery Mobile如何引用Font Awesome Icons的相关文章

jQuery Mobile + HTML5

最近项目需要,需要构建一个适合手持设备访问的站点,作者从网上查阅了一些资料,本文就是基于此而来. 首先下载jQuery Mobile http://jquerymobile.com/,选择稳定版即可. 打开VS 2013,新建一个Web Project,删除一些不必要的东西,如Default.aspx页面,添加对jQuery Mobile js和css的引用 新建一个HTML页面,并编码如下 <!DOCTYPE html> <html xmlns="http://www.w3.

Html+jquery mobile

打开VS 2013,选择[文件]-[新建]-[项目] 选择框架为.NET Framework4-[ASP.NET MVC4 Web应用程序],点击[确定] 选择[基本],点击[确定] 创建的MVC的项目显示如上图所示. 引入jquery mobile组件 首先下载jQuery Mobile http://jquerymobile.com/download/ 下载上述框中的包,然后进行解压如下所示 将上图中红色框中的文件引入到项目中,显示如下: 引入之后就能进行jquery mobile的开发了,

jQuery Mobile 移动 web 应用程序框架

在这里我们主要讲一下如何引用jQuery Mobile(引用了jQuery Mobile,你就能引用jQuery Mobile里已经封装好的代码,让开发更加快捷简单) 从 CDN 引用 jQuery Mobile(推荐)——也就是以http外部链接调用jQuery Mobile库 从 jQuerymobile.com 下载 jQuery Mobile 库 下载jQuery Mobile库网址:http://jquerymobile.com/download/ 下载的库里包含着jQuerymobi

jquery mobile 教程

简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的,没有特别为移动应用程序设计. jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾.它是基本jQuery框架并提供了一定范围的用户接口和特性,以便于开发人员在移动应用上使用.使用该框架可以节省大量的js代

经典收藏 50个jQuery Mobile开发技巧集萃

1.Backbone移动实例 这是在Safari中运行的一款Backbone移动应用程序.想开始体验移动开发,一个好的出发点就是关注这个应用程序的构建方式.先不妨在你的浏览器中查看该应用程序. 相关链接:http://bennolan.com/2010/11/24/backbone-jquery-demo.html 2.使用媒体查询来锁定设备 你可能会问如何使用CSS来锁定设备(根据屏幕尺寸).比如说,你想要为iPad设计两列布局.为智能手机设计单列布局.要做到这一点,最佳办法就是使用媒体查询.

Jquery Mobile实例--利用优酷JSON接口读取视频数据

本文将介绍,如何利用JqueryMobile调用优酷API JSON接口显示视频数据. (1)注册用户接口. 首页,到 http://open.youku.com 注册一个账户,并通过验证.然后找到API接口 (http://open.youku.com/docs/tech_doc.html) 可以看到优酷提供不少API,本文将演示“通过视频关键词”接口. 点击进去后,会发现client_id和keyword是必填的,因此,未来构造的URL应该类似 https://openapi.youku.c

jQuery Mobile 简介与安装

一.什么是 jQuery Mobile?(不是一个编程的框架,是一个UI框架,是一个偏重与设计的一个框架) jQuery Mobile 是一个为触控优化的框架,用于创建移动 web 应用程序. jQuery 适用于所有流行的智能手机和平板电脑: jQuery Mobile 构建于 jQuery 库之上,这使其更易学习,如果您通晓 jQuery 的话. 它使用 HTML5.CSS3.JavaScript 和 AJAX 通过尽可能少的代码来完成对页面的布局. 二. jQuery Mobile适合开发

解决关于jquery mobile databox日期插件手机上失效的问题

不废话,直接上代码,修改前的代码: <span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><html> <head> <title>密码修改</title> <meta http-equiv="Content-T

jquery mobile RedirectToAction url地址不更新

使用asp.net mvc 和 jquery mobile 开发手机版网站 发起一个post请求,在第一个action里做了处理,用RedirectToAction 跳转到其他action继续处理后,返回视图,这时在url上的地址还是第一个action,简单的处理办法,禁用jquery mobile的ajax加载页面的功能 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> &l