使用CSS在文字前面加上图标。

最新推荐文章于 2023-12-07 16:16:53 发布
最新推荐文章于 2023-12-07 16:16:53 发布
阅读量1.7w 收藏 6
点赞数 1
分类专栏： # CSS使用技巧 # script css html 文章标签： css div url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sxzlc/article/details/7755796
版权

#noticeIcon ｛

padding: 0px 0px 0px 23px;

background-image: url(pages/images/point/notice_icon.gif);

background-repeat:no-repeat;

color:#FF0000;

margin-left:0.33em;

｝

 

使用padding (上右下左) 使文字相对图片偏移

background-repeat:no-repeat;图标只出现一次

margin-left 使图片和文字整体偏移

 

<div id="noticeIcon ">XXXX</div>

sun0322
关注
专栏目录
css控制文字前的小图标具体写法
09-25
例如，在给定的代码示例中，使用了padding-left属性，该属性用来在文字左边创建一定量的空间，并通过background属性设置背景图像。背景图像设置为不重复（no-repeat），并通过padding-left的值来控制图标与文字之间...
通过纯CSS实现文字前添加图片
shandamengcheng的博客
09-15 7311
纯CSS添加图片 <ul id = "nav"> <li><a href="#">Home</a></li> <li>Servies</li> <ul> <li>Design</li> <li>Development</li&gt...
css 文字前面添加图标
⑧o年崋日常记录
09-29 3092
.pop-div-my .el-popover__title{ background: url(’…/assets/icon_question.png’) no-repeat top left/14px 14px; font-size: 14px; padding-left: 20px; }
css 元素前后添加图标（::before 和 ::after 的妙用）
最新发布
朝阳39的博客
12-07 1478
【代码】css 元素前后添加图标（::before 和 ::after 的妙用）
css控制文字前的小图标
cangkukuaimanle——你满了么
12-14 9940
有些列表项需要在文字前加个小图标，如下图： 实现方法有多种，这里使用元素。 span标记是行元素，没有宽高，虽然可以通过display:block;来改变。但是就会造成换行。 贴代码： 选项1 选项2 选项3 选项4 这里使用了padding-left来实现这个小图标的出现，就是让文字靠右点
css 标题文字前面加小图标，如何使它们不错位？
aa2635aaa的博客
11-27 5331
两种方法： 一、把小图片当做h3的背景来调即： .menubar h3{font-size: 14px; font-weight: bold; text-align: left; margin:0;background:url(123.jpg) no-repeat left center;padding-left:图片的宽度;}； 二、加上使图片绝对居中； 推荐第一种情况，如果
CSS实现文本周围插入符号
weixin_30374009的博客
07-17 169
CSS实现文本周围插入符号的方案 本文要讨论的是如何在文本的周围插入图标，怎么样控制它们之间的位置关系，通过HTML结构合理性与CSS属性的使用来比较不同方案所实现效果的优缺点。 常见设计稿要求 在文本前、后、上、下插入图标、线条、三角形、圆形 插入的元素要和文本实现间距、对齐（居中、顶部、基线）等位置关系。 理伦知识 灵活使用display、background、z-index等属性 通过...
DIV+CSS图标文字列表布局样式代码
06-11
在这个名为"DIV+CSS图标文字列表布局样式代码"的资源中，我们可以看到一个适用于网页图文列表的布局方案。 首先，`index.html`是网页的主文件，它包含了页面的基本结构和内容。在这个例子中，`index.html`很可能...
css图标与文字对齐的两种实现方法
09-24
在本篇教程中，将介绍两种通过CSS实现图标与文字对齐的方法。 第一种方法是通过设置图片的垂直对齐属性来实现。在HTML中，可以使用`<img>`标签插入图标图片，并使用`<span>`标签来包围文字。接着，在CSS中，为`...
在input中右边加上一个图标的css样式
09-25
另外，如果希望在不同状态下（如鼠标悬停或获得焦点）改变图标，可以使用CSS伪类，例如`:hover`、`:focus`等来定义不同的背景图片或调整其他样式。 最后，为了适应响应式设计，你可能需要根据屏幕大小调整图标的...
用::before伪元素，在文字前面画一个圆形
Frank_colo的博客
09-01 1173
【代码】用::before伪元素，在文字前面画一个圆形。
在文字前加图标技巧
xiao1215fei的专栏
09-23 2679
在css布局时，先将文字内容布局
css里的小图标怎么加入,前端页面如何引入小图标？CSS字体的另类使用方式！
weixin_29029831的博客
08-03 2438
相信很多小伙伴都在网页中结果一个个的小图标.在学习完html和css后我们也可以做到再web页面使用小图标，但是一般我们要实现这样的小图标都是用图片去使用的，那么有没有什么更高级的方法呢(或者说，互联网大厂们他们是怎么做的呢)？接下来这篇文章告诉你。先来看看我们说的小图标究竟是什么以该页面为例，红色方框所标注的应该是一个类似列表项的按钮，但实际上css提供的列表项并没有这样的形状(也不能给其指定颜...
在文字前设置图标的办法
qiuyun604的专栏
03-26 1396
1)通过设置图片背景在文字前设置图标；如： .CSS文件： Html文件： 通过设置：padding值和margin值来调整图片和文字的距离；   2）通过before与after伪标签在文字前设置图标；如： 小知识：  :before 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用；  :after 设置在
element-ui中加入前置icon图标
ZC97
01-19 771
css字体图标的基本使用和追加
m0_53454320的博客
03-28 439
字体图标的基本使用和追加
HTML中用自定义字体实现小图标icon
ruan2012的专栏
02-10 1785
最近在做一个项目时, 研究了一下新浪微博的前端, 看到首页中那个图标了吗, 以前看到这类效果的第一反应就是用一个gif之类的图标做出来!! 但在研究的过程, 发现了一个小技巧, 注意那个em标签中的文本是E, 但显示出来一个类似ICON的图标.    既然是HTML+CSS写出来的, 那么应该是由css控制显示出来的效果的.     其他的一些css基本没什么问题, 都理解了...
使用CSS提升网页文字设计
这个标签在早期网页设计中用于设定字体、颜色和大小，但在CSS出现后，其使用逐渐减少，因为CSS提供了更灵活且更强大的文字控制方式。 首先，通过CSS，设计者可以实现内容和展示的分离，这意味着网页内容不再与它的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值