使用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/css/font-awesome.css" />

3: 开始使用:

?


1

<a href="#" class="fa fa-trash-o fa-1g"></a>

注意:    fa 是全局必须加入。

                     fa-trash-0  是你需要的图标类(相当于名字)参考地址: http://fontawesome.io/icons/

                     fa-1g  控制大小用的 还有(fa-2x ,fa-3x,fa-4x,fa-5x)。

效果:

代码:

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<!DOCTYPE html>

<html>

<head>

    <title>font icons test</title>

    <meta charset="ut-8" />

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

    <style type="text/css" >

        .danger{

            display: inline-block;

            width: 80px;

            height: 30px;

            text-align: center;

            background: brown;

            border-radius: 5px;

            font-size: 14px;

            line-height: 30px;

            text-decoration: none;

            color: white;

        }

    </style>

</head>

<body>

    <!--用法一-->

    <a class="danger" href="#"><i class="fa fa-trash-o fa-lg"></i>Delete</a>

    <!--用法二-->

    <i class="fa fa-trash-o fa-2x"></i> Delete

    <i class="fa fa-trash-o fa-3x"></i> Delete

    <i class="fa fa-trash-o fa-4x"></i> Delete

    <!--用法三-->

    <a href="#" class="fa fa-trash-o fa-5x"></a>

</body>

</html>

时间: 2024-10-12 16:05:49

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

使用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屏

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

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

Font Awesome 是一套绝佳的图标字体库和CSS框架

Font Awesome 是一套绝佳的图标字体库和CSS框架.http:/ /ww w.i is7.co m/b/slj/Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用CSS的样式.要使用Font Awesome图标,请在HTML页面的 部分中添加以下行:国内 CDN:<link rel="stylesheet" href="https:/ /cdn.bootcss.com/font-awesome/4.7.0/css/

板邓:给网站添加favicon图标

网站添加favicon图标可以让浏览器识别我们网站的品牌!所以还是蛮重要的! 第一步:制作你的logo图标favicon.png,然后把图片文件后缀改成favicon.ico:用ftp上传到根目录. 第二步:在网站的模板文件header 添加一段代码即可 <link rel="shortcut icon" href=favicon.ico" type="image/x-icon"

为网站设置icon图标用于显示在浏览器标签页最左侧

icon图标,想必大家对它并不陌生吧,在浏览网页时会看到浏览器标签页的最左侧会有一个小图标,这个正是icon图标.本例为大家介绍下如何为网站设置这个图标 这句话起什么作用 ?复制代码 代码如下: <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> 图标要存放在网页文件夹根目录中一个,固定位置, 但文件名一定要是favicon.ico不能是别的是定义站

怎么给网站添加ICO图标

怎么给网站添加ICO图标 现在的网站大多数会在自己的网页上添加属于自己的小logo,进而增加网页的版权性,所以,网站的ico图标的添加也显得尤为重要了 方法如下: 1.将ico文件放在网站根目录 2.在网站页面中head标签内添加 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />即可

Swift - 异步加载各网站的favicon图标,并在单元格中显示

下面是一个简单的应用,表格视图的各个单元格自动异步加载各个网站的favicon图标,并显示出来. 主要是复习下如何自定义单元格,单元格中图片的异步加载,以及didSet的用法. 效果图如下: 操作步骤: (1)先创建单元格类 - FaviconTableViewCell.swift 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

如何给网站页面添加图标?

问题:如何给网站页面添加图标? 解决办法:只要在head内添加这一句即可. <link rel="Shortcut Icon" href="http://cnc.qzonestyle.gtimg.cn/aoi/img/logo/favicon.ico?max_age=31536000" type="image/x-icon" /> 如何给网站页面添加图标?

那么如何添加网站favicon.ico图标

1.  获得一个favicon.ico的图标,大小为16px×16px最为合适 2. 将制作好的图标文件Favicon.ico上传到网站的根目录: 3. 在首页文件的html代码的头部中加入如下代码: <link rel="Shortcut Icon" href="favicon.ico" > 4. 如果想收藏书签也有Favicon.ico图标,在上面那段代码下面加入 <link rel="Bookmark" href=&quo