前端设计必备-Font awesome 插件使用菜鸟言语

简介: font awesome 是一个封装好的“插件”、你在使用的时候 直接调用对应的类即可。 原理:是将ICON做成了字体、然后封装起来、对于我们而言 操控字体比操控图片  我们容易很多。 使用说明:去官网http://fortawesome.github.io/Font-Awesome/#examples 下载最新版本的文件、解压之后、将“css”和"fonts"两个文件夹

font awesome 是一个封装好的“插件”、你在使用的时候 直接调用对应的类即可。


原理:是将ICON做成了字体、然后封装起来、对于我们而言 操控字体比操控图片  我们容易很多。

下载最新版本的文件、解压之后、将“css”和"fonts"两个文件夹复制到当前工作目录跟目录下。注意:一定要将fonts放入、并且与

css同级!    结构如图即可!

准备工作做好之后
接下来就可以动手感受一下font awesome的魅力了!新建一个空页面。随便写一个标签、

<i class="fa fa-link"></i>

备注:fa为统一的样式、必须填写、   后面的为对应的图标的类、这样出来的效果就是你想要的。这个链接样式是封装好的、你如果想改变、只需要在自己的样式表里面复写其样式即可、eg: fa-link{ color:#000000; font-size:16px  }   这样、图标就会变黑变大!  是不是很自由呢?

到这里、大家肯定很好奇 我是怎么知道哪个图标的类名的?    又有人会感叹:我可没有能力记住那么多类名。   这样的体验真的不是很好、所以万能的大神造就了搜索神器:http://www.thinkcmf.com/font/search.html奥森图标寻找     只需要在输入框输入你想要寻找的图标、大部分都会出来的、
当然、现在这个库还不是很完善、但是在不断地壮大。如今已经由最初的几十个图标增长到五百多个了。

大家可以来看官方的宣传语


接下来大家又想了、这个东西这么美、那兼容性呢?
实话实说、font awesome一直以来对IE的支持都不是很理想、之前Font Awesome官方出过对Font Awesome 3.2.1的IE7兼容性解决方案,但其最新版本4.2.0至今未有任何动作。 ThinkCMF秉承开放至精神,集己所力推出Font Awesome 4.2.0兼容性解决方案,目前已完美兼容至IE7。
大家遇到兼容性问题可以来这里查询: http://bbs.thinkcmf.com/forum.php?mod=viewthread&tid=347

兼容性解决方案:
在 <head> 标签 里, 引入 font-awesome.min.css. 
<link rel= "stylesheet" href= "path/to/font-awesome/css/font-awesome.min.css" >
<link rel= "stylesheet" href= "path/to/font-awesome/css/font-awesome-ie7.min.css" >  

目录
相关文章
|
7月前
|
前端开发
vscode编写前端提升效率的三个必不可缺的插件以及使用方法
vscode编写前端提升效率的三个必不可缺的插件以及使用方法
|
7月前
|
存储 前端开发 JavaScript
GIS前端编程-Leaflet插件发布
GIS前端编程-Leaflet插件发布
51 0
|
7月前
|
前端开发 JavaScript 定位技术
GIS前端编程-Leaflet插件扩展
GIS前端编程-Leaflet插件扩展
86 0
|
10天前
|
开发框架 前端开发 定位技术
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
【4月更文挑战第30天】Flutter插件市场和开源资源加速开发进程。pub.dev是官方插件库,提供大量第三方插件,节约时间和保证质量。选择插件时关注功能需求、评价及维护状况。开源资源作为学习、解决问题和创新的平台,需注意版权、代码质量和兼容性。案例分析展示插件应用,开源社区促进交流与技术进步,未来市场将持续发展。善用资源,提升开发效率与项目竞争力。
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
|
10天前
|
传感器 前端开发 Android开发
【Flutter 前端技术开发专栏】Flutter 中的插件开发与集成
【4月更文挑战第30天】本文探讨了Flutter插件开发的关键技术和实践,包括插件作为连接Flutter与原生功能桥梁的角色,开发流程(定义接口、实现原生代码、打包发布),以及集成方法(添加依赖、初始化)。文中提到了多媒体、传感器和文件系统等常见插件类型,并以相机插件为例说明开发步骤。此外,还强调了版本兼容性、性能优化和错误处理的注意事项,推荐了开发工具和资源。随着Flutter的发展,插件开发将更加重要,未来有望形成更丰富的生态系统。
【Flutter 前端技术开发专栏】Flutter 中的插件开发与集成
|
15天前
|
前端开发 数据可视化 API
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
30 0
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
|
15天前
|
前端开发 JavaScript CDN
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(一)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
30 0
|
2月前
|
前端开发 JavaScript 程序员
推荐给前端程序员的5款浏览器插件
推荐给前端程序员的5款浏览器插件
|
4月前
|
前端开发 JavaScript 算法
【web前端技术】响应式画廊Gallery插件-Justified-Gallery
【web前端技术】响应式画廊Gallery插件-Justified-Gallery
59 0
|
10月前
|
前端开发
Echarts实战案例代码(21):front-endPage的CJJTable前端分页插件ajax分页异步加载数据的解决方案
Echarts实战案例代码(21):front-endPage的CJJTable前端分页插件ajax分页异步加载数据的解决方案
55 0