下载地址

Download

引入的方式

主要引入font文件夹与font-awasome.min.css文件

假设index.html文件的css都放在同一个目录下的css文件夹中。这时讲fonts文件夹拷入,
fonts文件夹需要与css文件夹在同一个目录下,并且是同等级别。

在css中,需要拷入 font-awesome.min.css 文件。

使用

在index.html中引入。

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

在font-awesome.min.css 中修改目录,保证其正确性。

@font-face {
font-family:'FontAwesome';
src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');

在html中使用示例:

<i class="fa fa-home fa-fw">

转载于:https://www.cnblogs.com/kevinyau/p/11084402.html

图标字体Font Awesome 4.7 的引入与使用相关推荐

  1. 给网页图标字体 Font Awesome 添加动画效果

    在国外网站中使用Web字体已经流行起来,虽然使用中文不太靠谱,但我们可以使用图标字体,也是很是方便的,图标字体有很多,可看<30个免费网页图标字体以及使用方法>一文,其中Font Awes ...

  2. Bootstrap专用图标字体Font Awesome

    Font Awesome 中包含的所有图标都是矢量的,也就可以任意缩放,避免了一个图标做多种尺寸的麻烦.CSS对字体可以设置的样式也同样能够运用到这些图标上了.本站的字体图标就使用了Font Awes ...

  3. Bootstrap V5 图标字体的引入以及使用方法

    目录 图标字体使用方法一 文件下载 文件引用 使用图标 图标字体使用方法二 文件下载 文件引入 使用图标 图标字体使用方法一 文件下载 打开官网链接:Bootstrap v5 官网,点击图标库: 点击 ...

  4. HTML字体以及图标字体iconfont、Font Awesome的使用

    字体 • 通过font-family可以指定标签中文字使用的字体. • 例如: p{font-family:Arial} ​ 上边这行代码指定了p标签中使用名为arial作为字体 • 一般来说只有用户 ...

  5. 引入图标字体的三种方式

    图标字体(iconfont) ------我们在网页中会发现一些小图标,可以通过图片引入图标,但是图片本身比较大,应用起来非常的不灵活.所以在这里给小伙伴们介绍一个叫"图标字体"的 ...

  6. wordpress菜单显示css字体,WordPress导航菜单图标字体插件font awesome 4 menus

    用了wordpress后,大伙都不约而同的给菜单用上了图标字体,确实给博客带来了一定的美化效果.不过,在强迫症的眼里,能代码化就尽量不用插件吧!于是将这个插件改造成代码版,顺便精简了基本用不到的 sh ...

  7. Qt使用漂亮的图标和字体(Font Awesome)————附代码实例

    文章目录 0 背景 1 使用 1.1 法一 1.2 法二 0 背景 Font Awesome是 Twitter Bootstrap设计的完美图标字体,是css框架的网页字体图标库,在网页中经常出现.它 ...

  8. 微信小程序引入阿里巴巴彩色图标字体(Symbol)

    步骤一:在微信小程序开发者工具的工作的根目录打开cmd,输入 npm install mini-program-iconfont-cli --save-dev 步骤二:输入命令,生成iconfont. ...

  9. 字体图标 icon font

    原文地址为: 字体图标 icon font Icon font icon font 指的是用字体文件取代图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点 大小可以自由 ...

  10. html页面调用ico图标,如何在HTML中使用图标字体 - icon font?

    日期:2012-8-27  来源:GBin1.com 在线演示  本地下载 主要特性 使用icon font来生成图标相对于基于图片的图标来说,有如下的好处: 自由的变化大小 自由的修改颜色 添加阴影 ...

最新文章

  1. python画散点图类型-python学习之matplotlib绘制散点图实例
  2. python零基础有用吗-零基础参加软件测试有用吗?老男孩Python培训班
  3. [禅悟人生]尊严非席, 不可卷起
  4. Linux部署动态网页,linux构建动态WEB服务器安装篇
  5. linux 基础训练题,Linux习题练习
  6. 团队组成五个基本要素_【记录】综合分部宁波分队团队拓展活动
  7. 修改mysql root的秘密
  8. 高仿iOS微信客户端
  9. LED字体下载,可视化大屏,数据可视化必备
  10. java 设置excel颜色_Java 设置Excel图表背景填充(颜色、图片填充)
  11. win10壁纸存储位置_这是Windows 10存储其默认壁纸的位置
  12. 看看人家那公众号管理系统,那叫一个优雅(附源码)
  13. 闹钟(Alarm Clock)
  14. 漫谈:一个工作两年半的程序员的人生感悟
  15. 双软企业的税收优惠政策怎么样?
  16. C语言实现模拟ATM机管理系统
  17. 如何用Heidisql本地连接阿里云RDS数据库
  18. c语言数列求和中有乘法,C语言数列求和(使用while循环)
  19. Dokuwiki的安装、配置管理
  20. 2022-2028年全球与中国紫外线(UV)传感器行业竞争格局与投资战略研究

热门文章

  1. python与r语言哪个好学_python和r哪个难一点
  2. 计算机二级考试c语言 上机,计算机等级考试二级C语言上机题[2]
  3. 【HDU6286】2018(容斥)
  4. java孢子进化_孢子进化论游戏
  5. linux 字符驱动 tty,打通linux的tty驱动的数据链路
  6. java字符串截取删除_字符串截取的常用方法
  7. 实心和空心哪个抗弯能力强_为什么轮胎不设计成实心的?不怕爆胎 480阅读
  8. phonegap2.9.1 android 环境搭建,PhoneGap 开发环境搭建
  9. linux 精简桌面,Linux桌面环境之轻型简易妙招(摘自toy)
  10. Keras实现卷积神经网络