CSS组件：字体图标

最新推荐文章于 2022-03-22 08:37:27 发布
最新推荐文章于 2022-03-22 08:37:27 发布
阅读量953 收藏
点赞数
分类专栏： ★ CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wozhangyi/article/details/106886642
版权

字体图标

字体图标就是文字，只是这种文字长得和图标一样
在这里插入图片描述
字体图标优缺点

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

Font Awesome 图标 link

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

要使用Font Awesome图标，请在HTML页面的 部分中添加以下行：

<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>
路飞小朋友
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
fa --图标字体库--
01-19
fa --图标字体库--
关于FA字体图标
hitris的博客
01-08 2953
科普一下 什么是FA？引用网上的一段描述： Font Awesome 一套绝佳的图标字体库和CSS框架 Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。 使用攻略参考以下地址： http://fontawesome.dashgame.com/
字体图标 fa fa html5,Font Awesome 4.2.0的所有图标参考
weixin_39950010的博客
06-04 4037
fa-adjust [] fa-adn [] fa-align-center [] fa-align-justify [] fa-align-left [] fa-align-right [] fa-ambulance [] fa-anchor [] fa-android [] fa-angellist [] fa-angle-double-down [...
CSS 图标
热门推荐
风花雪月，品霖千年之情
03-27 1万+
CSS 图标 <!DOCTYPE html> <html> <head> <title>Font Awesome Icons</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://kit.fontawesome.com/a076d05399.js"></script> &
【css】fa图标变细
Meditation_Crazy
09-29 486
前言 转载：https://www.cnblogs.com/gongshunkai/p/13725235.html 代码 -webkit-text-stroke:1px white; -moz-text-stroke:1px white; -o-text-stroke:1px white; text-stroke:1px white;
图标：svg图片转字体图标
02-04
异象isui组件库的高级图标字体。 由设计。 它们是免费使用的，并根据许可。 我们打算将此图标包与一起使用，但绝不仅限。 无论您是个人还是商业用户，都可以在合适的地方使用它们。安装npm install isui-iconfont --...
字体图标元件库.zip
07-20
Font Awesome字体图标具有轻量和友好的特性，非常适合在Axure原型设计中进行应用，用它来制作具有交互样式的按纽和组件会变得非常方便。字体图标的样式设置方法跟设置字体的样式是相同的，选中图标字符在字体样式中...
在Vue中使用icon 字体图标的方法
12-02
5接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个。 2但是考虑网络及用户体验 阿里iconfont下载本地使用 1 阿里iconfont图标直接下载到本地 2 在assets文件下创建...
rapido:灵活而完整CSS原型制作框架
05-13
完全支持带有8种字体的图标字体和自定义的mixin，以消除任何摩擦带有自定义mixin的完整CSS动画集几乎所有事物都有一个变量文献资料有关当前可用内容的完整文档，请参见：学分 执照MIT许可证（MIT）
bootstrap读书笔记之CSS组件（上）
11-27
bootstrap3提供了200多个免费图标字体。认为它是一个字。 arial-hidden=”true” .sr-only（只读） 1. 引入方法： ”glyphicon> i标签是已经废弃了的html斜体标签。用span也可以。使用时必须基于...
html5 fa图标库,轻松学会在项目中使用fontawesome字体图标
weixin_33705384的博客
06-04 2188
什么是字体图标我们的网站经常需要一些形象的小图标来丰富页面的交互与展现。我们当然可以使用图片，但过多的图片会增加HTTP请求的开销，从而对页面的性能造成严重的损耗。即使使用CSS精灵的技术把多张图片揉成一张，对每个图片背景的定位也要花费开发人员不少的精力。此外，图片还可能会存在失真的问题，当我们试图把它们放大时，它们很可能会变得模糊，从而不影响页面的整体风格与用户体验。不如使用字体图标来解决这个问...
css零到一基础教程044：CSS 图标
kerryqpw的博客
03-22 307
如何添加图标 向 HTML 页面添加图标的最简单方法是使用图标库，比如 Font Awesome。 将指定的图标类的名称添加到任何行内 HTML 元素（如 <i> 或 <span>）。 下面的图标库中的所有图标都是可缩放矢量，可以使用 CSS进行自定义（大小、颜色、阴影等）。 Font Awesome 图标 如需使用 Font Awesome 图标，请访问 fontawesome.com，登录并获取代码添加到 HTML 页面的 <head> 部分： &l..
CSS属性：vertical-align详解
沉梦昂志
06-22 923
文章推荐 link1 link2 link3 Vertical-align属性 Vertical-align被用于垂直对齐inline元素，inline-block元素，以及inline-table的元素 inline元素基本上指的就是文本，inline-block元素基本上指图片，inline-table基本上指的表格 对齐inline元素 基本介绍 baseline：将元素x的基线与其父元素x的基线对齐 middle：将元素行高的中间与父对象x的基线对齐，再加上父对象的x高度的一半 top：将元素
CSS布局：float浮动
沉梦昂志
06-14 797
浮动特性 1、浮动元素有左浮动(float:left)和右浮动(float:right)两种 2、浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来 3、相邻浮动的块元素可以并在一行，超出父级宽度就换行(常用于制作导航栏) 4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题) 5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果 6、父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素【
CSS布局：文档流
沉梦昂志
06-10 611
文档流的特性 文档流中，行内及行内块元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局 空白折叠现象，无论多少个空格、换行、tab，都会折叠为一个空格，想让 span 标签之间没有空隙，必须紧密连接 同一行中，高矮不齐，底边对齐，如 span文本会和图片的最下端对齐 元素中的如果有英文文本会出现不能自动换行的情况，原因是英文文本之间没空格，浏览器会认为这是一个长的单词 脱离文档流，可以理解为元素已经不属于这个文档了，在它的上一层，也
CSS属性：背景和精灵图
沉梦昂志
06-23 537
CSS 背景属性 常用属性 background 属性连写 background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-position 设置背景图像的位置 background-origin 设置背景图片偏移量的原点 background-repeat 设置背景图像的重复方式 background-size 设置背景图片的尺寸 background-
CSS基础：伪类选择器
沉梦昂志
06-12 378
伪类 link 伪类是给页面中已经存在的元素添加一个类。 伪类用来描述一个元素的特殊状态，如：第一个子元素，鼠标点击的元素，鼠标移入的元素 常用伪类属性 :active 向被激活的元素添加样式 :focus 向拥有键盘输入焦点的元素添加样式 :hover 当鼠标悬浮在元素上方时，向元素添加样式 :link 向未被访问的链接添加样式 :visited 向已被访问的链接添加样式 :first-child 向元素的第一个子元素添加样式 伪类选择器处理超链接 给超链接不同状态添加不同的颜色或样式 a:hove
CSS基础：基础知识
沉梦昂志
06-05 372
css介绍 css 是层叠样式表，他的作用是用来规定 div 和 div 中内容的位置和样式 html 只负责文档的结构和内容，表现形式完全交给css，html文档变得更加简洁 css 三大特性 层叠性 层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性 层叠性主要遵循的原则是：优先级的情况下，就近原则，否则以优先级高的为准 继承性 继承性是指当子标签没有设置样式时，会继承父标签的样式 text-，font-，line-这些元素开头的都可以继承，以及color属性 子标签
elementui第三方字体图标
最新发布
09-04
elementUI 是一个基于 Vue.js 的桌面端组件库，提供了一套丰富的 UI 组件，方便开发者快速搭建界面。在 elementUI 中，使用了第三方字体图标来增加组件的美观性和可定制性。 elementUI 使用的第三方字体图标库是阿里巴巴的矢量图标库 iconfont。使用 iconfont 字体图标可以避免图片加载，减小了页面的加载压力，并且可以通过 CSS 的方式来自由调整字体的颜色、大小、旋转等样式，使得图标的使用更加方便灵活。 在 elementUI 中，我们可以通过以下步骤来使用第三方字体图标： 1. 在阿里巴巴矢量图标库（iconfont）中搜索需要的图标，并添加至购物车。 2. 在购物车中将选中的图标添加至项目，并进行下载。 3. 下载后解压得到的文件中，找到包含字体文件和 CSS 文件的目录。 4. 将 CSS 文件中的引用路径修改为项目中正确的路径。 5. 在项目的入口文件（如 main.js）中引入 CSS 文件： ```javascript import 'path/to/iconfont.css'; ``` 6. 在需要使用图标的组件中，使用 `<el-icon>` 标签，并通过 `icon-class` 属性来指定图标的类名： ```vue <template> <div> <el-icon icon-class="iconfont icon-xxx"></el-icon> </div> </template> ``` 其中，`icon-xxx` 为图标的类名，可以在下载的 CSS 文件中找到对应类名。 通过上述步骤，我们可以很方便地在 elementUI 中使用第三方字体图标，并根据需要进行自定义样式的调整。同时，elementUI 也提供了一些默认的内置图标，供开发者直接使用，方便快捷。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值