前端设计必备-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" >  

目录
相关文章
|
6天前
|
前端开发 数据可视化 数据挖掘
前端开发者的福音:这些插件让你轻松应对各种复杂需求!
前端开发领域充满创意与挑战,面对复杂需求,开发者常感力不从心。本文通过三个真实案例,介绍如何利用Chart.js、ESLint和Ant Design等强大插件,解决数据可视化、代码质量和UI组件复用等问题,提高开发效率,创造更出色的前端作品。
14 3
|
1月前
|
前端开发 JavaScript
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
乾坤qiankun(微前端)样式隔离解决方案--使用插件替换前缀
293 8
|
1月前
|
存储 前端开发 Java
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
本文介绍了使用Kaptcha插件在SpringBoot项目中实现验证码的生成和验证,包括后端生成验证码、前端展示以及通过session进行验证码校验的完整前后端代码和配置过程。
95 0
验证码案例 —— Kaptcha 插件介绍 后端生成验证码,前端展示并进行session验证(带完整前后端源码)
|
1月前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
78 0
|
2月前
|
运维 前端开发
前端使用antdesign导出插件跨域问题
前端使用antdesign导出插件跨域问题
33 1
|
3月前
|
前端开发 安全 测试技术
[译]一种基于模块联邦的插件前端
[译]一种基于模块联邦的插件前端
|
3月前
|
前端开发 开发者
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。
在前端开发中,webpack 作为模块打包工具,其 DefinePlugin 插件可在编译时动态定义全局变量,支持环境变量定义、配置参数动态化及条件编译等功能。本文阐述 DefinePlugin 的原理、用法及案例,包括安装配置、具体示例(如动态加载资源、配置接口地址)和注意事项,帮助开发者更好地利用此插件优化项目。
92 0
|
5月前
|
传感器 前端开发 JavaScript
前端开发者必备的VS Code插件推荐
前端开发者必备的VS Code插件推荐
|
4月前
|
前端开发 JavaScript API
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
52 0
|
4月前
|
监控 JavaScript 前端开发
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(上)
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(上)
52 0