CSS组件：字体图标

字体图标

字体图标就是文字，只是这种文字长得和图标一样

字体图标优缺点

字体拥有的属性（字体大小、颜色等），均适用于字体图标
具有矢量性，无限放大也不会有马赛克，保证清晰度
字体图标大小相对于图片要小很多，加载快，灵活
字体图标只能是单一颜色，图片可以多种颜色混合

Font Awesome 图标 link

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

内联样式

基本使用

您可以使用前缀 fa 和图标的名称来放置 Font Awesome 图标
Font Awesome 设计为与内联元素一起使用，字体图标常放置在 i标签中

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body><i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i></body>
</html>

大图标

fa-lg (增加33％)，fa-2x，fa-3x， fa-4x，或 fa-5x 类用于增加相对于其容器的图标大小
也可以直接fant-size设置文字图标大小

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body><i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i></body>
</html>

列表图标

fa-ul 和 fa-li 类用于替换无序列表中的默认前缀

<ul class="fa-ul"><li><i class="fa-li fa fa-check-square"></i>List icons</li><li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li><li><i class="fa-li fa fa-square"></i>List icons</li>
</ul>

动态图标

fa-spin 类可以让图标旋转, fa-pulse 类可以使图标以 8 步为周期进行旋转

<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-spinner fa-pulse"></i>

旋转和翻转的图标

fa-rotate-* 和 fa-flip-* 类用于旋转和翻转图标

<i class="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield fa-flip-vertical"></i>

固定宽度图标

fa-fw 类用于设置固定宽度的图标。当不同的图标宽度偏离对齐时，此类非常有用。特别适用于Bootstrap的导航列表和列表组

<div class="list-group"><a href="#" class="list-group-item"><i class="fa fa-home fa-fw"></i> Home</a><a href="#" class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a><a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i> Applications</a><a href="#" class="list-group-item"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>

伪元素

通过伪元素来设置图标字体

找到要设置图标的元素通过before或after选中
在content中设置字体编码
设置正确的字体样式，否则可能会乱码
还可以自定义大小，颜色等等

<style type="text/css">li{list-style: none;}li::before{content: '\f368';/*font-family: 'Font Awesome 5 Free';*/font-family: 'Font Awesome 5 Brands';margin-right: 10px;}
</style><body>
<ul><li>List icons</li><li>List icons</li><li>List icons</li>
</ul>
</body>

CSS组件：字体图标相关推荐

css中的代码图标,认识CSS中字体图标(示例代码)
前端之HTML,CSS(十一) 字体图标使用文字做出小图标的效果并超越了小图标应用精灵图,使得图标变得灵活,减少了请求次数,优化了界面的性能.字体图标本身为矢量图. 字体图标的使用过程 1.UI设计 ...
【夯实基础--CSS】=＞高级技巧（雪碧图/滑动门/CSS三角形/字体图标(iconfont)等）
CSS高级技巧 CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
Bootstrap 组件-字体图标
Bootstrap提供了总共263种字体图标可以满足大部分的图标需求为了能够正常使用bootstrap.min.css文件的上一级目录必须要有 fonts 目录,并且里面有,不能够缺失一个字体图 ...
CSS Font-awesome字体图标库文件
当出现需要引用的图标,需要link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.m ...
css icon设置,CSS之字体图标 icon 的多种实现
什么是icon?让我们先来看一个例子: 我们以简书为例子,图中看到的用圆圈起来的部分都是icon 这个时候你就想问了,这不就是几张图片么? 不,它不是图片,而是文字什么??这怎么可能是文字,文字怎么 ...
在 uni-app 中使用字体图标
在 uni-app 中使用字体图标下载iconfont字体图标进入 iconfont 官网本地下载图标文件压缩包解压出来在uni-app 项目static 下新建 fonts 文件夹 ...
字体图标的下载与使用
标题:学习与分享CSS的字体图标学习目的:减少资源占用,缓解浏览器与后台的压力网址:http://www.icomoon.io(此篇文章已此网址为例,国外网站,网速有点慢,不过个人喜欢这个网站一些 ...
html5 svg 信箱图标,在网页中使用内联SVG图标和字体图标的比较
如果你要在你的网站中创建一个图标系统,你可以有不少的选择.如果你希望使用图片来制作图标,可以使用CSS sprites(CSS雪碧)技术.如果你希望使用矢量图来作为图标(这是时下非常流行的做法),你可 ...
vue项目中如何使用字体图标，简单清晰明了！
1.登录阿里巴巴图标库官网,创建一个自己的项目,并将对应的svg图片添加或上传到对应的项目中,如下图所示: 2.点击[下载至本地]按钮,将文件夹下载下来: 3.在项目中src/assets目录下创建一 ...
如何下载及使用网页制作中的 iconfont 矢量字体图标？
谈到iconfont 直译是字体图标,没错它就是.只要做过网页的筒靴们肯定知道它是什么,上图说: 文字前面有颜色的小图标就是iconfont,那肯定有人好奇那,它为什么这样称呼,和一般图标又有什么区别 ...

CSS组件：字体图标

字体图标

Font Awesome 图标 link

内联样式

伪元素

CSS组件：字体图标相关推荐

最新文章

热门文章