当前位置: 首页 > news >正文

57.网页设计图标实战

首先我们需要找一个图标库,本次演示采用的是heroicon
在这里插入图片描述

● 之后我们根据需求搜索与之想匹配的图标并复制svg代码
在这里插入图片描述

● 之后将我们的代码复制到我们想要放置图标的地方
在这里插入图片描述
在这里插入图片描述

● 当然我们需要使用CSS来修饰一下

.features-icon {stroke: #087f5b;width: 32px;height: 32px;margin-bottom: 16px;
}

在这里插入图片描述

其他的同理即可
在这里插入图片描述

接着我们为我们的产品地方添加图标
在这里插入图片描述

和上面一样,这里我们只展示我们的CSS写法

.chair-icon {stroke: #087f5b;width: 24px;height: 24px;
}

最后的效果是这样的
在这里插入图片描述

其他的复制粘贴上一个就行了
这里教大家一个简单的复制粘贴多个内容的方式

按住ALT键盘可以多选,然后复制
在这里插入图片描述

同样按住ALT,可以多选一些光标,然后进行复制
在这里插入图片描述

点击复制之后就是这样的效果,就全部复制过来了,比较方便
在这里插入图片描述

最终的页面如下图,是不是比不加图标好看了很多,也是的用户阅读体验提高了很多?

在这里插入图片描述

http://www.lryc.cn/news/63841.html

相关文章:

  • 浅析AI视频智能检测技术在城市管理中的场景应用
  • unity中的Line Renderer
  • 【数据架构系列-06】一文搞懂数据模型的3中类型——概念模型、逻辑模型、物理模型
  • Java——Java面向对象
  • MyBatis:生命周期、作用域、结果集映射 ResultMap、日志、分页、使用注解开发、Lombok
  • PostgreSQL安装和开启SSL加密连接【配置双向认证】
  • 【ShenYu系列】ShenYu Dubbo插件全流程源码解析
  • spring解决循环依赖的三级缓存
  • C++ - 标准库(STL)
  • Java使用 Scanner连续输入int, String 异常错误输出原因分析
  • pt13网络编程
  • 华为云 绑定/更换证书
  • 重大问题,Windows11出现重大BUG
  • 傅里叶变换解析
  • 你的登录接口真的安全吗?
  • ChatGPT情商很高,但并不适合当搜索引擎
  • Mac 地址与 IP 地址有什么区别?
  • bootloaders
  • PC或服务器装双系统
  • 嵌入式代码查看分析利器---Understand
  • 人群计数经典方法Density Map Estimation,密度图估计
  • 【华为】Smart-Link基础知识
  • 分享24个强大的HTML属性 —— 建议每位前端工程师都应该掌握
  • NIO基础 - 网络编程
  • 06.toRef 和 toRefs
  • RabbitMq、Kafka、RocketMq整理
  • Python多元线性回归预测模型实验完整版
  • C#基础 变量在内存中的存储空间
  • 你最关心的4个零代码问题,ChatGPT 帮你解答了!
  • linux的环境变量