iconfont图标的使用_zm在iconfont加圆圈-程序员宅基地

什么是iconfont

在学习iconfont如何使用前，首先我们要了解什么是iconfont、iconfont有什么用以及使用iconfont的好处。

iconfont翻译过来就是图标字体，顾名思义就是iconfont显示为图标但实际上却是字体，就像输入法输入“五角星”有的直接可以显示为“☆”一样。

那么这个iconfont有什么用呢，现在iconfont在网页上应用非常广泛，比如下面这张图中红色圆圈标注的图标就是用的iconfont图标。
在这里插入图片描述
当然这些图标也可以是图片，但是与使用小图片相比，使用iconfont会有哪些好处呢。首先由于iconfont是以字体的形式来展现图标的，那么大小比图片小很多，网页去加载时也更快速；其次由于是字体，可以通过CSS中的font-size去改变它的大小，color去改变它的颜色，text-align：center使其居中等可以对文字进行的操作，多可以对其使用。

iconfont的使用

使用iconfont之前要了解一个网站：阿里巴巴矢量图标库-iconfont

进入这个网站就可以看到
在这里插入图片描述
在输入框输入“购物车”回车之后就会显示和“购物车”相关的图标，挑选自己喜欢的图标后点击“添加入库”（需要先注册），最后点击右上角的购物车。

选择下载代码

将下载好的压缩包放到要使用html文件下，解压缩会得到一个文件夹，我们想要的东西就在这里
在这里插入图片描述
点开文件夹后点击“demo_index.html”，会进入一个网页教你如何使用，这里我选择“font-class 引用”

根据指示开始写我们的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入iconfont.css -->
    <link rel="stylesheet" href="./font_ogaucyj6g8q/iconfont.css">
    <style>
        .box{
     height: 100px;width: 100px;margin: 0 auto;}
        /* 给p标签内部文字一个大小和颜色，该样式会作用到图标上 */
        .box p{
     font-size: 40px;color: red;}
    </style>
</head>
<body>
    <div class="box">
        <!-- iconfont为前缀必须要加，icon-gouwucheman为要引用的iconfont名字 -->
        <p class="iconfont icon-gouwucheman"></p>
    </div>
    
</body>
</html>

效果是：
在这里插入图片描述
这里可以看出大小是我们设置的“40px”，颜色也是红色。

本文链接：https://blog.csdn.net/weixin_45253306/article/details/104661693

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

三、购物车案例_17(笔记)_购物车案例请求数据地址-程序员宅基地

文章浏览阅读332次。购物车_购物车案例请求数据地址

在unity中DOTween 使用方法_tween number-程序员宅基地

文章浏览阅读603次。DOTween 使用方法_tween number

DSP之TMS320F28335学习总结与笔记（二）————ADC模块_dsp2833x_adc.c-程序员宅基地

文章浏览阅读1.2w次，点赞13次，收藏138次。F28335 ADC模块ADC转换模块A/D转换器（ADC）将模拟量转换为数字量通常要经过四个步骤：采样、保持、量化和编码。采样：将一个时间上连续变化的模拟量转化为时间上离散变化的模拟量。保持：将采样结果存储起来，直到下次采样，这个过程称作保持。一般，采样器和保持电路一起总称为采样保持电路。量化：将采样电平归化为与之接近的离散数字电平，这个过程称作量化。ADC关键指标分辨率：指数字量变化一个最小量时模拟信号的变化量，定义为满刻度与2^n的比值。分辨率又称为精度，通常以数字信号的位_dsp2833x_adc.c

V-rep学习笔记：机器人路径规划2-程序员宅基地

文章浏览阅读1.8k次。　　路径规划问题是机器人学研究的一个重要领域，它是指给定操作环境以及起始和目标的位置姿态，要求选择一条从起始点到目标点的路径，使运动物体(移动机器人或机械臂)能安全、无碰撞地通过所有的障碍物而达到目标位置。路径规划从研究对象上可分为关节式机械臂和移动机器人。一般来讲前者具有更多的自由度，而后者的作业范围要更大一些，这两类对象具有不同的特点，因此在研究方法上略有不同。在V-rep学习笔记：机器人路..._collision pairs

问题：U8的存货同步到本地时，报“数据库可能存在相同的编码”_数据库可能已经存在相同的编码等-程序员宅基地

文章浏览阅读1.5k次。1.环境：U8与本地某程序。跨服务器、跨数据库。2.问题：U8的存货同步到本地时，报“数据库可能存在相同的编码”。3.原因：在确认了U8程序正常、本地程序正常、U8数据库正常、本地数据库正常、链接服务器正常、触发器本身正常后，回到了问题的本身：为何原来的同步执行正常，但是现在的存货保存却异常，怀疑是最新的存货有问题。所以先停了触发器，然后用U8做了一个存货，正常保存后。启用触发器，直接用刚_数据库可能已经存在相同的编码等

EOS与ESD的区别_eos和esd的区别-程序员宅基地

文章浏览阅读7.9k次。摘要：什么是EOS？EOS与ESD的区别是什么？EOS为ELectrical Over Stress的缩写，指所有的过度电性应力。当外界电流或电压超过器件的最大规范条件时，器件性能会减弱甚至损坏。一、什么是EOS？EOS为ELectrical Over Stress的缩写，指所有的过度电性应力。当外界电流或电压超过器件的最大规范条件时，器件性能会减弱甚至损坏。EOS通常产生于：1.电源(AC/DC) 干扰、电源杂讯和过电压。2.由于测试程序切换（热切换）导致的瞬变电流..._eos和esd的区别

随便推点

模拟window桌面实现-程序员宅基地

文章浏览阅读84次。正在开发中的游戏有个全屏功能--可以在window桌面背景上运行，就像一些视频播放器在桌面背景上播放一样的，花了个上午整了个Demo放出来留个纪念。实现功能：显示图标，双击图标执行相应的程序，右击图标弹出该图标对应得菜单，点击非图标区则弹出桌面菜单。需要完整工程可以点此下载：DesktopWindow.rar。程序效果图如下：在这个程序里，定义了一个XShellItem..._模拟实现windows桌面效果

https://www.byhy.net/tut/webdev/django/01/-程序员宅基地

文章浏览阅读944次。https://www.byhy.net/tut/webdev/django/01/_byhy.net

vue玩转移动端H5微信支付和支付宝支付_移动端支付宝微信支付vue项目怎么写-程序员宅基地

文章浏览阅读5.8k次，点赞13次，收藏57次。业务场景介绍：H5移动端支持微信支付 [ 微信支付分为微信内支付（JSAPI支付官方API）和微信外支付（H5支付官方API）] && 支付宝支付 [手机网站支付转 APP 支付官方API ]订单生成逻辑：前端请求后端提交订单，后端去和微信或者支付宝对接生成订单（后续支付都是这个逻辑进行的对接）一、移动端微信支付，vue中如何玩？在移动端微信支付分为微信内支付和微信外支付。1.在订单组件中选择支付方式之后在支付页面先去判断是否是在微信内：//判断是否微信 is__移动端支付宝微信支付vue项目怎么写