前端时尚好用的图标项目-Font Awesome

概述

作为一个非专业的美工和前端的技术人员，在项目上有时需要用到一些图标，才能使前端看起来比较高大上，以前都是使用收集好的一些小图标，放在目录下面，通过手动添加图片标签来实现，但是这种方式比较繁琐，要收藏较多的图标，找起来也费劲。

Font Awesome介绍

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。项目网址 http://www.fontawesome.com.cn/

使用

使用方式也是非常简单，引入css/javascript文件，然后设置icon标签值即可
如果通过使用cdn的加速话，可以在Font Awesome官网上，通过邮箱进行注册，会得到一个嵌入html文件的一段代码

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Font Awesome</title><script src="https://use.fontawesome.com/7deeedbcff.js"></script>
</head>
<body>
<i class="fa fa-heart"></i>
</body>
</html>

效果如下

前端时尚好用的图标项目-Font Awesome相关推荐

Bootstrap专用图标字体Font Awesome
Font Awesome 中包含的所有图标都是矢量的,也就可以任意缩放,避免了一个图标做多种尺寸的麻烦.CSS对字体可以设置的样式也同样能够运用到这些图标上了.本站的字体图标就使用了Font Awes ...
第三方组件element-ui和图标库Font Awesome使用
1.第三方组件element-ui 1.1 安装(注意与vue的版本对应) 文档地址 npm i element-ui 如何新建一个vue项目安装成功之后,文件夹会多出一个 1.2以滑块作为演示滑 ...
【前端】Vue.js经典开源项目汇总
Vue.js经典开源项目汇总原文链接:http://www.cnblogs.com/huyong/p/6517949.html Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) ...
字体图标 icon font
原文地址为: 字体图标 icon font Icon font icon font 指的是用字体文件取代图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点大小可以自由 ...
GitHub 上值得前端学习的数据结构与算法项目
Hello,大家好,我是你们的前端章鱼猫. 简介前端章鱼猫从 2016 年加入 GitHub,到现在的 2020 年,快整整 5 个年头了. 相信很多人都没有逛 GitHub 的习惯,因此总会有开 ...
前端框架Vue——vue-i18n ，vue项目中如何实现国际化，$t的用法
前端框架Vue--vue-i18n ,vue项目中如何实现国际化,$t的用法 vue中html页面写入$t('')怎么显示
文字前的小图标HTML,Font Awesome实现文字链右边加一个箭头图标
在上一篇文章里介绍了用css背景图实现文字链右边加一个箭头图标的方法,本文将介绍用Font Awesome实现文字链右边加一个箭头图标的方法. Font Awesome是一个图标字体库,包含300多种 ...
前端切图之svg图标的复用基于defs和use 亲测有用
切图网长期致力于web前端开发外包服务,而我们也关注到现在图标很多时候采用svg更多一点,然后图标字体文件已经提供了很多种类的图标,不过采用svg图标可以自行选择更符合.更好看的图标,相比于字体图标更 ...
开源前端脚本错误监控及跟踪解决项目BadJS试用
摘要: 试用BadJS. 原文:开源前端脚本错误监控及跟踪解决项目-BadJS 试用作者:过错 Fundebug经授权转载,版权归原作者所有. BadJS 是一个web 前端脚本错误监控及跟踪项目 ...
技能学习：学习使用php（tp6框架） + vue.js，开发前端全栈网站-2.启动项目
技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-2.启动项目技能学习:学习使用php(tp6框架) + vue.js,开发前端全栈网站-1.工具和本地环境技能学习:学习 ...

前端时尚好用的图标项目-Font Awesome

概述

推荐

Font Awesome介绍

使用

示例

前端时尚好用的图标项目-Font Awesome相关推荐

最新文章

热门文章