CSS高级技巧(02)---1.小图标的制作--字体图标iconfont

最新推荐文章于 2024-07-30 10:27:19 发布
最新推荐文章于 2024-07-30 10:27:19 发布
阅读量470 收藏 1
点赞数
文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46764405/article/details/125818808
版权
  • 优点：
    • 1.轻量级 本质上是文字，以此不需要请求服务器也不会失真
    • 2.灵活性
    • 3.兼容性
  • 下载网站：
    • icomoon:http://icomoon.io

      • 使用步骤：
        • 1.选择好图样并打包解压
        • 2.把fonts文件放进项目下
        • 3.在<style>中加入一段字体说明（可在style.css中直接复制到font-display:lock;）
        • 4.打开demo.html复制小框框到<body>中
        • 5.进行样式定义:font-family:'icommon'
        • 6.附加字体文件格式
      • 如何追加图标?
        • 01打开网页
        • 02 插入项目下的selection.json文件
        • 03选好之后，点击下载，然后将生成的压缩文件解压之后替换掉之前项目里的字符文件即可，该步骤与前面无异，故不赘述。
  • 总结：复杂的图样用精灵图，简单的样式用字体图标
Horice冻柠茶
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css里的小图标怎么加入,前端页面如何引入小图标？CSS字体的另类使用方式！
weixin_29029831的博客
08-03 2414
相信很多小伙伴都在网页中结果一个个的小图标.在学习完html和css后我们也可以做到再web页面使用小图标，但是一般我们要实现这样的小图标都是用图片去使用的，那么有没有什么更高级的方法呢(或者说，互联网大厂们他们是怎么做的呢)？接下来这篇文章告诉你。先来看看我们说的小图标究竟是什么以该页面为例，红色方框所标注的应该是一个类似列表项的按钮，但实际上css提供的列表项并没有这样的形状(也不能给其指定颜...
css自制icon图标（最简单的一种方式）
风海洋的博客
12-15 1868
目录下（根据自己的需求放，也可以放在 assets 目录下，笔者是放在 /static/images 目录下），如下是我自己从网上下载的喇叭图标，图片命名为。组件库，去官网查了一下发现并没有 el-icon-notice 类型的公告图标（但是在 vant 与 vux 等移动端组件库中是有的），于是想着。，其实自定义 icon 图标方式有好几种，但是笔者只使用了一种较为简单的方式，亲测有效，现分享给同行开发者们。从网上下载自己喜欢的图标或者自制一个 logo 图标，将其放于项目的。
css超实用 可爱小图标
weixin_53603040的博客
11-16 732
举例 这是一颗小爱心哦 <div class="heart-solid icon"></div> css .heart-solid.icon { color: #000; position: absolute; margin-top: 6px; margin-left: 5px; width: 9px; height: 9px; border-left: solid 1px currentColor; border-bottom: solid 1p
纯css小图标
weixin_30596165的博客
09-18 769
1.小太阳 HTML部分 <div class="Box" id="Box"> <!--阳光线条--> <div class="box" id="box"> <span></span> <span></span> <span...
整理css（三）css画小图标
farmerXU的博客
05-29 561
第一种： header.header3 .dropdown-menu:before{ content: ""; width: 0; height: 0; border-bottom: 10px solid #999; border-left: 10px solid transparent; border-right: 10px solid transparent; position: absolute; right: 10px; left: auto; top: -7px; }
CSS高级技巧（二）：字体图标
前端
11-04 366
文章目录一、使用场景二、字体图标使用1.引入2.给标签定义字体3.字体图标的追加 一、使用场景 精灵图是有诸多优点的，但是缺点很明显。 图片文件还是比较大的。 图片本身放大和缩小会失真。 一旦图片制作完毕想要更换非常复杂。 字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。 字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体 字体图标的优点 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求 灵活性：本质
Hui-iconfont v1.0.9.7z
08-30
1. 可缩放性：Hui-iconfont基于字体技术，图标由矢量图形构成，这意味着无论放大或缩小，图标都能保持原有的清晰度和细节，避免了像素化的问题。 2. 易于使用：与传统图片相比，Hui-iconfont的图标作为字体文件，...
Hui-iconfont_v1.0.9.zip
05-01
在使用Hui-iconfont_v1.0.9时，开发者首先需要将字体文件引入到项目中，然后可以通过CSS的`content`属性或使用特定的类名来显示图标。例如，如果一个图标的Unicode编码是`\e600`，在CSS中可以这样写： ```css .icon...
Web-前端html+css从入门到精通 156. iconfont矢量图标库.zip
05-23
2. **下载库**：生成项目代码后，下载包含图标字体文件（如.ttf、.eot、.svg、.woff和.woff2）的压缩包，这些文件需要被引入到你的项目中。 3. **引入CSS**：将下载的CSS文件（如iconfont.css）链接到你的HTML文件...
Vue2.x中利用@font-size引入字体图标报错的解决方法
10-17
在Vue2.x开发过程中，我们有时会遇到使用`@font-face`规则引入字体图标时出现的错误。本文将详细讲解这个问题的原因以及如何解决。 首先，当我们在Vue2.x项目中利用`@font-face`引入字体图标时，可能会遇到两种常见...
material-icons：材料设计图标字体和CSS框架，用于自托管图标
02-05
材料设计图标字体和CSS框架，用于自托管图标。 该软件包仅包含图标字体和必需CSS。 因此，它比官方的material-design-icons包小得多，并且易于安装。 安装 下载或使用npm安装： npm install material-icons 用法 ...
【CSS3】CSS3 伪元素字体图标 ( 生成 icommon 字体文件 | 字体图标基本使用 | 使用伪元素实现 icommon 字体图标显示 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-20 1112
一、icommon 字体图标基本使用 1、生成 icommon 字体文件 2、字体图标基本使用 二、使用伪元素实现 icommon 字体图标显示
Ai 制作简单的iconfont字体图标
gyueh的博客
07-03 1555
点击文字工具，输入文字内容并调整为合适的大小，例610px。点击椭圆工具画一个大小为900*900的圆。按住shift，选中字体和图形 —剪去顶层。上传iconfont图标库，打开网址。选中圆形–右键–建立复合路径。保存类型(SVG)—确定。选中字体—对象—扩展。
CSS实现小图标
weixin_33719619的博客
09-28 654
关闭图标 .close { position: relative; display: inline-block; width: 12px; height: 12px; } .close:before { content: ''; display: inline-block; position: absolute...
css 元素前后添加图标（::before 和 ::after 的妙用）
朝阳39的博客
12-07 1386
【代码】css 元素前后添加图标（::before 和 ::after 的妙用）
CSS技能点--带图标的标题栏
程序员大阳
07-05 1263
标题栏往往都是带图标的，不然就太单调了，例如腾讯网： 一般都是左边图标，右边标题文字，接下来我们用CSS来实现下
三分钟教会你自制 iconFont 字体图标库
非著名程序猿
10-24 9735
app开发的时候，我们大多会用到字体icon，下面我们就讲解一下，如何自定义生成 iconFont 一般情况，我们优先选择在 Iconfont-阿里巴巴矢量图标库 下载我们需要的矢量icon的svg格式, 如果这里没有你需要的icon，也可以自己切图把png格式的图片转化为svg; svg 导入并生成 font 在线转换网址 导入多个svg图片 点击右下角 记好每个icon的code 然...
制作生成IconFont
chenlijian的博客
07-14 2964
前言 当设计稿有出现小图标时，如果以 img 或设置 background 等方法，图标会出现模糊状态，影响整体视觉。为了防止此类发生，推荐使用 IconFont。 一、 IconFont特点 图标清晰，无毛边，对于需要缩放多个尺寸的图标，是个很好的解决方案； 文件加载体积小； 可以直接通过 css 的 font-size，color 修改它的大小和颜色； 支持一些 css3 对文字的效果，例如：阴影、旋转、透明度； 兼容低版本浏览器； 二、 生成 IconFont 设计提供图标的SVG文件。
【分享】前端程序员-技术网站推荐
最新发布
一位前行者的博客
07-30 385
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
el-tree的下拉小图标不消失
12-23
根据提供的引用内容，可以通过修改el-tree组件的样式来实现下拉小图标不消失的效果。具体实现方法如下： 1. 首先，找到el-tree组件的样式文件，一般是一个CSS文件或者是一个样式对象。 2. 在样式文件中，找到对应...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值