CSS之通过伪元素添加图标字体

这里使用的是Font Awesome图标字体库

通过伪元素设置图标字体：
1.找到要设置图标的元素通过before或after选中
2.在content中设置字体的编码
3.设置字体的样式
fab:
font-family: ‘Font Awesome 5 Brands’

fa,fas:
font-family: ‘Font Awesome 5 Free’;
font-weight: 900;

Demo:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="./icon/css/all.css"><title>图标字体</title><style>div{margin:100px 500px;}p::before{/*图标字体对应的unicode编码 比如对应的图标类:fa fa-heartbeat*//* content:'\f21e'; *//* content:'\f368'; */content:'\f0f8';/* font-family:'Font Awesome 5 Brands'; *//*在all.css中查找图标类(fa,fas,fab)的样式*/font-family:'Font Awesome 5 Free';font-weight: 900;color:green;margin-right:10px;}</style>
</head>
<body><div><!-- <i class="fa fa-heartbeat"></i> --><p>今夕何夕兮</p><p>搴舟中流</p><p>今日何日兮</p><p>得与王子同舟</p><!-- <i class="fa fa-wheelchair"></i> --><!-- 通过实体来使用图标字体&#x图标编码包含元素要添加对应的图标类--><span class="fa">&#xf193 </span></div>
</body>
</html>

CSS之通过伪元素添加图标字体相关推荐

【CSS进阶】伪元素的妙用--单标签之美
正文从这里开始,本文主要讲述一下伪元素 before 和 after 各种妙用. :before和::before的区别在介绍具体用法之前,简单介绍下伪类和伪元素.伪类大家听的多了,伪元素可 ...
【CSS】457- CSS 伪元素指南
层叠样式表(css)是一种独立的语言,用于描述web应用程序的表示.这涉及到诸如颜色.字体和HTML元素布局的完全控制等概念. 在本文中,将为您介绍级联样式表中的伪元素,以及如何将它们与兼容性一起使用 ...
css伪元素覆盖,CSS :befor :after 伪元素的巧妙用法
本篇重点介绍CSS中的:befor.:after创建的伪元素几种使用场景,如填充文本.作为iconfont.进度线.时间线以及几何图形. 1. 介绍 1.1 说明 CSS中的:befor.:after ...
CSS 中的伪元素是什么，有什么用处
CSS 中的伪元素是一种特殊的元素,它们不是 HTML 元素,但通过 CSS 属性和关系运算符,我们可以为它们指定与实际 HTML 元素相同的样式.伪元素可以用于实现一些特殊的效果,比如动画.阴影.弹 ...
并不简单的翻页时钟（一）：样式篇（Flex布局、line-height、data-set用法、css before after伪元素）
目录并不简单的翻页时钟我以为的翻页时钟实际上的翻页时钟关键的知识点效果展示代码解析 HTML CSS 详解CSS 1.display:flex 元素居中 2.:before .:after ...
css中为伪元素增加点击事件和hover
鼠标悬停在父元素上面时为伪类元素增加样式  <div class="father"></div><style ...
[css] 如何使用伪元素实现增大点击热区来增加用户体验？
[css] 如何使用伪元素实现增大点击热区来增加用户体验? .extend-via-pseudo-elem {position: relative; }.extend-via-pseudo-elem: ...
CSS如何使用伪元素选择器给所有的div里的文本前面添加小写罗马数字编号
一.需求说明假设现在我有三个div标签,它们在浏览器里显示的内容如下图所示: 我希望使用CSS给它们全部添加上序号,添加好序号后的样子如下图所示: 可以看到序号是递增的,不是普通的阿拉伯数字,而是小 ...
CSS - 基于before及after伪元素添加字符
前言就像在电视剧<迷离时空>(The Twilight Zone)中遗失的一集一样,CSS提供的新属性赋予了使用者在内容中添加伪标记的能力.可能听起来会有点奇怪,但这种方法却有着众多的应 ...

CSS之通过伪元素添加图标字体

CSS之通过伪元素添加图标字体相关推荐

最新文章

热门文章