使用Font Awesome替换你的网站图标

http://fortawesome.github.io/Font-Awesome/whats-new/

使用Font Awesome替换你的网站图标

Font Awesome,原只为Bootstrap而设计的字体图标,不过,现在你可以单独用它来为你的网站工作。丢掉图片图标吧,跟我一起来用Font Awesome。

Font Awesome 特性:

1、一个字体文件, 249 个图标。

2、用CSS控制样式。

3、无限缩放。

4、个人、商业均可自由使用。

5、支持IE7+。

6、在Retina屏幕上也能完美呈现。

7、设计师的助手。

8、兼容屏幕阅读器。

Font Awesome的使用:

1、先下载Font Awesome字体样式文件和字体。CSS样式文件下载清点这里字体下载请点这里

2、将下载的字体和CSS样式文件拷贝到你的项目目录中去。

3、随便选择一个CSS样式文件,你可以选择font-awesome.less或者font-awesome.min.css作为你的图标样式文件。

4、打开你所选择的样式文件,编辑样式文件中的字体路径,当然这个路径是针对你css样式文件位置来确定的。

5、在你的项目中引用样式文件即可。

例如:

1

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

or

1

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

如需兼容IE浏览器,那请下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。

1

2

3

<!--[if IE 7]>

<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css">

<![endif]-->

  • 6、在你需要使用这些图标的地方加上一个html标签,给该标签一个class属性,属性值请参阅 Font Awesome图片集

例如:

当然,这些样式你可以自己定义的,但是为了兼容性,最好还是使用原版的吧!

使用Font Awesome替换你的网站图标

时间: 2024-10-01 05:02:00

使用Font Awesome替换你的网站图标的相关文章

使用Font Awesome替换你的网站图标(icons 图标)

http://www.thinkcmf.com/font/icons/ 第一次使用 Font Awesome 发现相当的爽呀!它的图标很全,能够帮你节约时间去找图片.下面就来一起学习吧: 1: 去官方网站下载解压 http://fontawesome.io/ 2: 解压后拷贝到你的项目中再引入到你的文件里面 如下: ? 1 <link rel="stylesheet" type="text/css" href="font-awesome-4.0.3/

在Axure中使用FontAwesome替换你的网站图标[axure小技巧]

你是不是还在为你的网站做一个很小的图标而忙碌着?你是不是还在为找一个图标导出百度或者谷歌?你有没有想过可以用字体来做一个图标代替普通的图片图标?这两天给公司做案例,由于自己又对设计不熟悉,寻找图标的苦差可不是很好做.同事分享了一个用字体代替图片做网站图标的资源,在此非常感谢!Font Awesome,原只为Bootstrap而设计的字体图标,不过,现在你可以单独用它来为你的网站工作.丢掉图片图标吧,跟我一起来用Font Awesome. 使用方法: 1. 下载 Font Awesome 官方网站

WordPress添加网站图标

如何给WordPress添加网站图标_百度经验 http://jingyan.baidu.com/article/54b6b9c0d549622d583b4788.html 看到很多网站都带有ico图标或favicon图标,这个的话方便用户记住你网站,同时便于用户在收藏夹上快速找到你网站.今天我们谈谈如何给WordPress添加网站图标,方法很简单的,只需2步就可以实现. 方法/步骤 1.制作网站图标首先我们用photoshop做好网站的图标图片,大小最好是16*16,或者32*32的,不要过大

再谈获取网站图标Icon

上一篇文章讨论了一下获取网站图标方法,是通过从根目录直接获取和html解析结合的方式来获取的,并给出了相应的代码示例.这一篇来讨论一个更现成的方法,这个方法是从360导航的页面发现的,在导航页面中点击添加网址,会弹出一个添加网址的对话框,点击126邮箱,可以看到126邮箱和图标就跑到上面去了.查看一下网络监控,可以看到Request URL是http://cdn.website.h.qhimg.com/index.php?domain=www.126.com,Request Method是GET

替换应用程序exe图标,主要使用BeginUpdateResource,UpdateResource API函数

替换应用程序exe图标,主要使用的API函数是BeginUpdateResource(),UpdateResource(),EndUpdateResource()来使用自定义的ico文件类替换exe程序原来的图标. [cpp] view plain copy // 第一个参数是将要替换图标的exe文件路径,第二个参数是替换的ico文件路径 void ReplaceExeIco(LPCTSTR lpszApp, LPCTSTR lpszIco) { try { CFile file(lpszIco

网站图标制作

http://free.logomaker.cn/tools/icoMaker.aspx 网站图标制作 先找好图标素材,可以去这里搜素,图标搜索引擎 iconpng http://www.iconpng.com/ 转换成icon 16*16格式,这样显示的不失真并且很清晰,可以去这个网站进行转换 ICO图标在线制作 http://free.logomaker.cn/tools/icoMaker.aspx 至于图标为什么一定要命名为favicon.ico,我不是太理解,我上传其他.ico图片大小不

一个网站图标引发的血案!绕过同源策略,判断你是否登录了某网站

前言 我要告诉大家的是,在没有得到你同意的情况下,目前大多数主流的网络平台都会泄漏你的登录状态.无论你当前是否进行了登录操作,攻击者都可以检测到你电脑登录了那些网络平台.而且目前有很多平台可以提供人口统计以及个性分析之类的服务,所以攻击者也可以就此推测出你的人物特性. 演示站点:[点我访问] 技术分析 对于绝大多数的平台而言,它们都可以利用登录机制来检测用户是否登录了自己的网络服务.虽然这个漏洞已经存在多年了,而且这也是一个众所周知的漏洞,但是目前大多数公司似乎并不打算去修复它. 需要注意的是,

使用icon替换你的网页图标(转)

第一次使用 Font Awesome 发现相当的爽呀!它的图标很全,能够帮你节约时间去找图片.下面就来一起学习吧: 1: 去官方网站下载解压 http://fontawesome.io/ 2: 解压后拷贝到你的项目中再引入到你的文件里面 如下: <link rel="stylesheet" type="text/css" href="font-awesome-4.0.3/css/font-awesome.css" /> 3: 开始使用

网站图标素材下载整理

一.ico/png 图片下载网站: 好图网 http://www.haotu.net/ 二.Web字体下载管理工具iconfont: 阿里UX矢量图标库–最强大的矢量图标库(Icon font制作力荐工具) ICOMOON!强悍的WEB字体图标制造器/Web字体使用实例 三.更多整理 Web字体工具整理,网页图标字体以及使用方法整理