图标字体

最新推荐文章于 2024-08-14 09:51:23 发布
最新推荐文章于 2024-08-14 09:51:23 发布
阅读量101 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44278908/article/details/114081868
版权

图标字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/font/css/all.css">
    <style>
        li{
            list-style: none;
        }
        li::before{
            /* 
                 通过伪元素来设置图标字体
                      1.找到要设置图标的元素通过before或after选中
                      2.在content中设置字体的编码
                      3.设置字体的样式
                            fab
                            font-family：'Font Awesome 5 Brands';

                            fas
                            font-family:'Font Awesome 5 Free';
                            font-weight:900;
            */
            content: '\f1b0';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            color: blue;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <!-- 
        图标字体（iconfont）
              -在网页中经常需要使用一些图标，可以通过图片来引入图标
                    但是图片大小本身比较大，并且非常的不灵活
                -所以在使用图标时，我们还可以将图标直接设置为字体，
                    然后呢后通过font-face的形式来对字体进行引入
                -这样我们就可以通过字体的形式来使用图标
        font awesome使用步骤
             1.下载 英文官网下载
             2.解压
             3.将css和webfonts移动到项目中
             4.将all.css引入到网页中
             5.使用图标字体
                    -直接通过类名来使用图标字体
                        class="fas fa-bell"
                        class="fab  fa-accessible-icon"
     -->
     <!-- <i class="fas fa-bell"></i> -->
     <ul>
         <li>
             锄禾日当午
         </li>
     <li>...</li>
     </ul>
     <!-- 
         通过实体来使用图标字体：
                &#x图标的编码；
      -->
      <span class="fas">&#xf0f3;</span>
</body>
</html>
不好意思，此人不存在
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
“此人不存在”
weixin_30564785的博客
03-09 1万+
https://yeaher.net/2019/02/2787.html “此人不存在” 俗话说，“眼见为实耳听为虚”。但由于科技的发展，眼见则不一定是真实，可能是虚假捏造的！不信？请看下图，下图的妹子们，全部都是不存在于这个真实世界，通过【ThisPersonDoesNotExist.com】（这个人不存在）这个网站自动生成。 这个网站的开发者，利用NVIDIA公司（英伟达）在2018...
ohmyposh 图标字体文件
05-17
图标字体文件是ohmyposh实现这些个性化主题的关键部分，它使得命令行提示符可以显示各种图形化的符号和图标，从而提高开发人员的工作效率和终端体验。 在提供的压缩包文件中，我们看到了多个字体文件，这些都属于...
HTML设置图标字体
hff945的博客
08-24 708
插入单个图标文体，可以直接在body中插入。 当插入多个且在文章的行首之时，可以通过伪元素来设置图标字体 1.找到要设置图标的元素通过before或after选中 2.在content中设置字体的编码 3.设置字体的样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m...
五个稀奇古怪的网站
little_spice的博客
03-20 1万+
纪妖：https://www.cbaigui.com/ 无用的网站：https://theuselessweb.com/ 全历史：https://www.allhistory.com 逗比拯救世界：http://www.dbbqb.com 此人不存在：https://thispersondoesnotexist.com/
不存在的人 深度学习_这个人不存在
weixin_26731327的博客
10-10 1286
不存在的人 深度学习Yes, you heard me right. This man does not exist. He was created by a Generative Adversarial Network.是的，你明白我的意思了。 这个人不存在。 他是由对抗性网络创建的。 什么是一般对抗网络？ (What is a General Adversarial Network?) Ge...
v-text
qq_44278908的博客
02-27 135
v-text <!DOCTYPE html> <html lang="ch"> <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"> <title
图标字体——CSS
mantou_riji的博客
04-12 929
文章目录图标字体（iconfont) 的引入字体图标的使用——fontawesome下载解压将`css`和`webfonts`文件夹移动到项目中将all.css引入到网页中使用图标字体 图标字体（iconfont) 的引入 在网页中经常需要使用一些图标 eg： 可以通过图片来引入图标，但是图片大小本身比较大，并且非常的不灵活，所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标。 字体图标的使用——fontaweso
图标字体集成Nerd Font的图标目录
03-15
图标字体是一种将矢量图形整合到字体中的技术，使得开发者可以在网页或应用程序中方便地使用各种图标。Nerd Font 是一种特别的图标字体集，它将多个流行图标库（如Font Awesome、Devicons等）集成在一起，提供了一个...
Word、Excel、PPT等图标异常解决方案
热门推荐
xcyyueqiu的专栏
08-30 17万+
本文出处：CSDN http://blog.csdn.net/xcyyueqiu/article/details/52357567啰嗦几句…前不久才重装过系统，可是没多久就出现了一个很恶心的问题：word文档、excel文档图标异常，显示的是下面这样： 打开倒是可以正常用word打开，文件关联是对的，重装office都没解决。 忍了几天终于忍不了啦，尝试网上搜了几次，都没有找到解决办法。进
一闪一闪图片 css动画
最新发布
有问题可关注公众号：前端研究院 后台输入问题回复
08-14 296
这段代码会使得图片不断地闪烁，闪烁的频率由。决定，即每秒闪烁一次。中的百分比来改变闪烁的强度和速度。
CSS的重绘和重排是什么？
沐爸的博客
08-12 1017
CSS的重绘和重排是什么？它俩有什么区别？如何对重绘和重排进行优化？快来一起看看吧！
前端案例：极速问诊项目（移动端自适应）（HTML+CSS+JS）
li3123537691的博客
08-13 305
一个简单的移动端案例，模拟不同设备下逻辑分辨率不同，宽高自适应正常打开整体布局打开 f12 （ctrl + shift + M）或者点击左上角图标,将其模拟为移动端设备在移动设备iPhone6/7/8，逻辑分辨率375的整体布局其banner图尺寸现在切换设备为iPad，逻辑分辨率为768，此设备下banner图尺寸自适应再切换设备为iPhone 14 Pro Max，逻辑分辨率为430，此设备下banner图尺寸自适应。
html+css+js网页设计 电商戴欧妮珠宝网3个页面 有轮播图，折叠面板，一键置顶等功能
qq_42431718的博客
08-13 272
html+css+js网页设计 电商戴欧妮珠宝网3个页面 有轮播图，折叠面板，一键置顶等功能 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
display:flex布局，最简单的案例
有问题可关注公众号：前端研究院 后台输入问题回复
08-12 194
【代码】display:flex布局，最简单的案例。
CSS（层叠样式表）
Chujun123528的博客
08-09 1270
CSS全称为Cascading Style Sheets（层叠样式表），是一种用于描述网页样式的语言。它可以将HTML文档中的内容与样式分离，使得网页的结构和呈现分离，提高了页面的可维护性和可重用性。CSS允许开发者对HTML元素进行各种视觉方面的样式控制，包括文字和字体属性、颜色和背景、布局和定位等。
在vue3中配置scss
iku_n的博客
08-12 327
要在 Vue 3 中使用 SCSS（Sass 的一个子集），你需要安装相应的依赖，并对项目进行一些配置。
qtoolbutton设置图标字体
07-29
`QToolButton` 是 Qt 库中的一个工具按钮组件，在 Qt 界面设计中，如果你想给 `QToolButton` 设置图标和自定义字体，你可以这样做： 1. 首先，你需要创建一个 `QToolButton` 对象，并通过其 `setIcon()` 方法设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值