静态页面之字体图标的使用方法——icoMoon

已于 2022-02-20 22:30:51 修改
阅读量228 收藏
点赞数
文章标签： css3 css 前端
于 2022-02-20 22:18:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41033258/article/details/123036941
版权

推荐网站：https://icomoon.io/

  1. 点击圈出的内容 在这里插入图片描述

  2. 随意选择喜欢的图标在这里插入图片描述

  3. 在编辑下可以修改图标在这里插入图片描述

  4. 底部点击下载在这里插入图片描述

  5. 解压之后，将font文件夹复制到项目文件夹里在这里插入图片描述

  6. 引入HTML在这里插入图片描述

  7. 最终效果在这里插入图片描述
    PS：根据pink老师视频总结文字版，方便自己查看

IamCoder-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
体检管理系统——页面静态化( Freemarker)
种一颗十年前的树
12-28 284
页面静态化介绍 页面静态化其实就是将原来的动态网页(例如通过ajax请求动态获取数据库中的数据并展示的网页)改为 通过静态化技术生成的静态网页，这样用户在访问网页时，服务器直接给用户响应静态html页面，没有 了动态查询数据库的过程。 那么这些静态HTML页面还需要我们自己去编写吗？其实并不需要，我们可以通过专门的页面静态化技 术帮我们生成所需的静态HTML页面，例如：Freemarker、t...
字体图标浅析——什么是字体图标？如何生成？怎么使用？
热门推荐
Jay的博客
08-01 1万+
什么是字体图标？字体图标字体-Font字体的工作原理是是什么？字体图标的优缺点？怎么生成字体图标？怎么使用字体图标？本文将为你一一解答。
图标字体 VS 雪碧图——图标字体应用实践
lzm18064126848的专栏
11-30 1814
转载地址：http://yincheng.site/icon-font 本文介绍使用图标字体和SVG取代雪碧图的方法。雪碧图是很多网站经常用到的一种技术，但是它有缺点：高清屏会模糊、无法动态变化如hover时候反色。而使用图标字体可以完美解决上述问题，同时具备兼容性好，生成的文件小等优点。 雪碧图 雪碧图实例：淘宝PC端 将多张小图放至一张大图 使
动漫主题dreamweaver作业静态HTML网页设计——仿京东(海贼王)版本
网页设计与制作
12-24 58
精彩专栏推荐👇🏻👇🏻👇🏻👇🏻 ❤ 【作者主页——获取更多优质源码】 ❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Websto
使用 Nginx 部署静态页面的方法
09-30
本篇文章主要介绍了使用 Nginx 部署静态页面的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
java静态工厂方法详细解析——使用静态工厂方法代替构造器
12-22
2. **静态工厂方法不用在每次调用时创建新对象**：静态工厂方法可以控制实例化过程，如使用单例模式只返回一个实例，或者缓存已创建的对象，避免重复创建，提高性能。 3. **隐藏类的实现细节**：静态工厂方法可以...
PHP页面静态化——纯静态与伪静态用法详解
10-15
主要介绍了PHP页面静态化——纯静态与伪静态用法,结合实例形式分析了PHP页面静态化——纯静态与伪静态相关原理、实现方法与相关操作注意事项,需要的朋友可以参考下
web 静态页面，后台页面 适合毕业设计之类的使用
03-26
"web 静态页面，后台页面 适合毕业设计之类的使用"这一标题揭示了该资源是一个适用于初学者或毕业生进行项目实践的Web后台界面设计模板。 描述中提到，这个模板可以作为后台页面使用，意味着它包含了一系列功能齐全...
JS之防抖和节流
喵喵的博客
07-09 1020
在页面的无限加载场景下，需要用户在滚动页面时，每隔一段时间发一次 ajax 请求，而不是在用户停下滚动页面操作时才去请求数据；所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。在后期有拓展了前缘防抖函数，即执行动作在前，设定延迟周期在后，周期内有事件被触发，不执行动作，且周期重新设定。当事件被触发时，设定一个周期延时执行动作，若周期又被触发，则重新设定周期，直到周期结束，执行动作。固定周期内，只执行一次动作，若没有新事件触发，不执行。
【前端从入门到精通：第九课：CSS3新增属性及伸缩盒布局】
weixin_50556117的博客
07-09 1048
flexbox是一个很新的东西，在w3c希望可以使用flexbox实现一些更复杂的布局和应用。要开启弹性盒模型，只需要设置display的属性值 flex，因为它是CSS3中为display新添加的值类型。用于区分不同浏览器的内核，当CSS属性是实验性质的时候，可以加浏览器私有前缀，让对应浏览器兼容。align-items 定义flex子项在flex容器的当前行的侧轴(纵轴)方向的对齐方式。stretch ： align-content 的默认值，各行将会伸展以占用额外的空间。既过渡的速度，方式等。
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 605
仅对已定位的元素（）有效，默认值为0，可以为负值。
html设计（两种常见的充电效果）
最新发布
2301_81704123的博客
07-12 1171
title>充电效果
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1151
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
旋转木马案例
喵喵的博客
07-08 760
旋转木马 如果接口需要的数据格式和原始数据提供的格式有差异 不要去改接口方法 也不要改原始数据 做一层中间件(数据处理函数/方法) <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
css画半圆&&画圆弧
M1512415的博客
07-12 140
【代码】css画半圆&&画圆弧。
html&css基础
antyuki的博客
07-09 741
/
CSS上下悬浮特效
m0_56164131的博客
07-09 453
要实现一个上下悬浮的特效，可以使用CSS的@keyframes规则和动画属性。
如何使一个盒子水平垂直居中（常用的）
karlaofsky的博客
07-08 625
相对父级上边和左边，或者下边和右边各移动50%，同时通过外边距减去自身的宽高各一半的大小。//子元素宽度的一半。//子元素高度的一半。来直接减去盒子自身的50%大小。将盒子的上下左右定位全部设置为0，同时设置外边距自适应。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值