零基础学做网站培训介绍

当前位置:

建网站如何使用Font Awesome字体图标

Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这标字体集几乎囊括了网页中可能用到的所有图标,除了包含 Twitter Boostrap 的默认图标外,还有社交收集图标、Web 应用法度图标和编辑器图标等等,可以免费用于各类网站制作。

Font Awesome字体图标
下面是自己建网站时,使用Font Awesome字体图标的步骤

1.到Font Awesome官网(fontawesome.com/?from=io)下载最新版本的Font Awesome;(也可以不下载,直接使用远程字体库。方法见:自己做网站怎么使用字体图标

2.解压文件,将此中的css和fonts文件夹拷贝到项目中,此中css文件夹中有两个css文件(font-awesome.css和font-awesome.min.css(压缩版));

3.在需要应用的html或者其它类型的页面中引入样式文件,如下:(如果不了解HTML知识,请学习html视频教程

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

4.修改CSS中的路径。打开font-awesome.css文件,若是引用的是紧缩版的,就打开font-awesome.min.css,打开文件看到第一个样式定义如下:


@font-face {

font-family: ""FontAwesome"";

src: url(""../fonts/fontawesome-webfont.eot?v=4.1.0"");

src: url(""../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0"") format(""embedded-opentype""), url(""../fonts/fontawesome-webfont.woff?v=4.1.0"") format(""woff""), url(""../fonts/fontawesome-webfont.ttf?v=4.1.0"") format(""truetype""), url(""../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular"") format(""svg"");

font-weight: normal;

font-style: normal;

}

检查并修改此中的src:url()中的路径是不是与当前项目路径正确。

4.最后在页面中参加响应的html元素,并且遵守font awesome定义好的样式为须要添加矢量图标的元素指定样式。


<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-car"></i>
<i class="fa fa-car fa-3x"></i>

这样就可以在我们自己建网站时使用Font Awesome字体图标来替代背景图片了。

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 用什么建网站?Wordpress建网站好不好?这些问题经常被新手问上问起。可以这样说,wordpress程序可以建各种类型的网站,它的功能强大之处令人称赞,
  • 在网站布局过程中,运用div+css的布局是特别有利的,通常我们需要对一个div层进行居中处理,那么如何通过css属性对它进行控制呢:下面分享一个建网页
  • APMServ5.2.6本地环境配置软件介绍由于每台电脑的端口使用情况不一样,很多学员在用XAMPP环境配置软件配制本地环境的时候,经常会不成功,出现服务器或
  • SEO软件安装及使用方法 图文教程附件下载 (114776 次浏览)
    SEO软件安装及使用方法第一步:下载软件,下载地址:https://pan.baidu.com/share/link?shareid=482816&uk=404547014第二步:下载后,会得
  • dreamweaver是个可视化的软件,你直接选中你要更改的设置,在编辑器中直接就可以更改了。或是用CSS也可以设置你说的那些内容字体大小、颜色样式。dr
  • 由于WP开始自动调用谷哥字体,会导致自己做网站时打开后台很慢,我们只需要屏蔽谷歌字体。在之前我们讲到使用代码方式屏蔽谷歌字体,现在学做网站论坛
  • 网站favicon图标如何制作 图文教程 (112025 次浏览)
    在我们上网的时候,看到有许多网站,当打开它的时候,在浏览器中会出现它们网站的图标,特别的个性化。很多学做网站的学员也问过这样的问题,询问网站f
  • 说起网站图标favicon.ico,大家都想到的是制作一个固定小图片来显示【方法见:如何制作网站图标favicon.ico】,很少知道网站图标可以做成一个动态的。