web前端css伪元素使用阿里iconfont中Unicode编码

最新推荐文章于 2024-07-04 11:28:57 发布
最新推荐文章于 2024-07-04 11:28:57 发布
阅读量962 收藏 7
点赞数 4
文章标签： css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44827068/article/details/108914311
版权

web前端css伪元素使用阿里iconfont中Unicode编码

在阿里iconfont中创建项目

在这里插入图片描述
新建项目
新建项目
搜索自己想要的图标并添加入库
在这里插入图片描述
点击购物车
在这里插入图片描述
添加至项目

在这里插入图片描述
回到“我的项目”，点击“下载至本地”，可以下载到web项目的根目录
在这里插入图片描述
在这里插入图片描述
解压后把包含.iconfont.css文件的文件夹链接进项目
在这里插入图片描述
在这里插入图片描述
从iconfont.css中复制下面这一段到自己项目的css文件中
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
可以看到图标的Unicode编码，在css中可以用斜杠“\r60b”
在这里插入图片描述
html中
在这里插入图片描述
css中
在这里插入图片描述
上图中的“font-family”字段源于
在这里插入图片描述
显示成功
在这里插入图片描述

因库
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Iconfont使用字体图标--Unicode
小夕由的博客
08-15 3197
阿里的iconfont 拥有上千万的图标 链接在这里 并且支持多种格式导出及使用 下面介绍一下我在前端项目中使用iconfont的方法 1.首先将你需要的icon 加入购物车 2. 如单个icon 则可直接在购物车页面 点击下载代码 如多个icon 则需添加至一个项目 然后在个人项目页面 点击下载至本地 3.下载完成后 解压下载的压缩包文件 将其中的字体文件 添加至自己前端项目的文件夹中 我这里是添加至font文件夹 4.打开解压后的文件中的字体样式，将相应样式代码复制到自己前端文件的css样式中
CSS中的几个伪元素使用介绍
09-25
在CSS中，伪元素是一种非常实用的特性，用于在元素的内容之外添加或修饰内容，而无需在HTML中实际增加...虽然在某些项目中可能并不常用，但理解并掌握这些伪元素能够极大地提升我们作为前端开发者的设计和开发效率。
iconfont的图标使用Unicode格式的实现
qq_41892833的博客
12-30 2862
一：准备 将自己需要的图标添加到自己的项目中，如下图所示： 将图标文件下载到本地 二：使用 复制项目里提供的@font-face 具体的使用 方式一：用i标签 方式二：通过伪元素添加图标 三：代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>iconfont的Unicode使用</title&g
CSS3 icon font完全指南
NOT NULL
08-29 602
原文连接大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face)，包括IE6都支持，只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon，我们就可以尝试使用font来实现，本文将详细讲解这种用法。为什么要将icon做成字体？在很多网站项目中，我们常常会用到各种透明小图标，然后网站要兼容各个浏览器，也可能会有多个尺寸，甚至还要考虑换肤等需求。那么我们就要将这些小图标
【css】iconfont的使用 Unicode 引用
qq_36557846的博客
07-20 975
iconfont下载和使用
CSS 小结笔记之图标字体（IconFont）
weixin_30918415的博客
10-02 257
　　本篇主要介绍一种非常好用的图标大法——图标字体（IconFont）。 　　什么是图标字体？顾名思义，它是一种字体，只不过这个字体显示的并不是具体的文字之类的，而是各种图标。 　　网站上经常会用到各种图标，之前网页上使用图标主要采用精灵图（背景位置+背景缩放）来实现，但是这样使用起来有许多不便之处，一方面缩放处理起来比较麻烦，一方面如果要改动一些图标就需要去找到设计人员重新设计，然后重新添加...
使用iconfont图标的unicode编码动态赋值，发现只显示编码，不显示图片
akxj2022的博客
04-24 5959
iconfont里图标的unicode编码 例如： &#xe601; 改成: \ue601 即可
iconfont图标使用-unicode-font-class字体图标-symbol
RealizeInnerSelf丶
06-26 1406
目录web端使用icon单个使用unicode引用第一步：拷贝项目下面生成的font-face第二步：定义使用iconfont的样式第三步：挑选相应图标并获取字体编码，应用于页面font-class引用第一步：拷贝项目下面生成的fontclass代码：第二步：挑选相应图标并获取类名，应用于页面：symbol引用第一步：拷贝项目下面生成的symbol代码：第二步：加入通用css代码(引入一...
CSS中:before和:after伪元素使用的奇技淫巧
09-24
:before和:after伪元素在CSS中除了被用来添加元素、加小标、清浮动等,还有很多妙用之处,接下来我们就来看一两个CSS中:before和:after伪元素使用的奇技淫巧
阿里web前端开发手册.pdf
11-03
CSS 规范是阿里web前端开发手册中的一部分。手册规定了CSS 命名规范，例如，应该使用小写字母和数字，且不能使用特殊字符和汉字。同时，手册还规定了选择器的使用规范，例如，应该使用类选择器而不是ID 选择器。 4....
IconfontTool.7z 阿里巴巴iconfont 字体库，显示图标及相应的unicode 编码。 .NET 5平台
10-27
在Iconfont中，每个图标都有一个对应的Unicode编码，这个编码可以在CSS或者HTML中直接使用，来显示相应的图标。例如，通过设置`content`属性为Unicode编码，我们可以让网页元素显示图标。 IconfontTool可能是专门为...
css伪元素 长方体 css伪元素 长方体
06-25
css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪...
IconFont 图标 字体
liu709127859的专栏
04-23 513
   @font-face {font-family: 'iconfont'; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), /*...
图标字体
weixin_43339334的博客
06-03 984
图标字体（iconfont） - 在网页中经常需要使用一些图标，可以通过图片来引入图标 但是图片大小本身比较大，并且非常的不灵活 - 所以在使用图标时，我们还可以将图标直接设置为字体， 然后通过font-face的形式来对字体进行引入 - 这样我们就可以通过使用字体的形式来使用图标 fontawesome 使用步骤 1.下载 https://fontawesome.com/ 2.解压 3.将css和webfonts移动到项目中 4.将a
vue 中使用iconfont Unicode编码线上字体图标的流程
ahu2331的博客
07-09 805
1.打开http://www.iconfont.cn官网，搜索你想要的图标。添加字体图标到购物车，点击购物车然后添加至项目，点击确定 2.点击图标管理/我的项目，找到对应的文件，点击Unicode，然后生成在线链接 3.新建iconfont.css文件，把在线生成...
CSS伪元素速查
include的博客
04-05 287
CSS伪元素 All CSS Pseudo Elements： Selector Example Example description ::after p::after Insert something after the content of each element ::before p::before Insert something before the con...
iconfont如何使用
2302_76198190的博客
06-15 206
iconfont如何使用
CSS 原生嵌套语法兼容性问题
whs15193553607的博客
07-03 275
所谓的嵌套，就是将一个 CSS 规则放在另一个（嵌套规则）中，子规则的选择器将相对于父规则的选择器。这有利于代码的模块化和可维护性。原来只能在 CSS 预处理器Less、Sass中使用的嵌套功能，先在可以在原生 CSS 中使用。请注意这是一个最近的更新，被称为宽松的CSS嵌套。它适用于最新的Chrome Canary和Safari技术预览版。
vue 启动项目报错Syntax Error: Error: PostCSS received undefined instead of CSS string
最新发布
小秋的博客
07-04 352
因为要开发不同的项目使用不同的node版本，所以就用nvm切换，所以导致了node-sass编译问题。node-sass对于node高版本和低版本切换进行的编译不一样，所以重新依赖一下。启动vue项目然后报错如下图。这个是跟node版本有关系。
iconfont用unicode编码放到代码里是空白的
05-26
如果你在使用 iconfont 时，将其编码为 Unicode 并将其放入代码中，但是在页面中显示为空白，则可能需要在 CSS 样式中添加一些特定的属性。具体来说，你需要在对应的选择器中添加 `font-family` 属性以及 `font-style` 属性，如下所示： ``` .iconfont { font-family: "iconfont" !important; font-style: normal; } ``` 其中，`font-family` 属性中的 `"iconfont"` 是你在使用 iconfont 时设置的字体名称，`font-style` 属性设置为 `normal` 表示字体样式为普通字体。 如果上述方法仍然不能解决问题，你还可以尝试将 iconfont 文件放入网站根目录下，并在 CSS 样式中使用相对路径引用。例如，假设你的网站根目录下有一个文件夹叫 `fonts`，其中包含了 iconfont 文件，那么你可以在 CSS 样式中这样写： ``` @font-face { font-family: "iconfont"; src: url("../fonts/iconfont.ttf") format("truetype"); } ``` 这样，就可以将 iconfont 文件引入到页面中，并正确显示了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值