关闭

利用伪元素:before和:after插入图标

时间: 2018-05-25阅读: 10895标签: 图标作者: 转载

如果你想在网页的某些文字前加图标或者想改变li元素默认的图标,你会如何做?常见的做法是在文字前再加一个标签用于存放图标,引入一个图标库(比如Iconfont-阿里巴巴矢量图标库)或者一张图标图片。

本文价绍一种不用再额外添加html标签,存粹利用css就能插入或者自作图标的方式。先了解伪元素:before和:after定义与语法

定义:在被选元素的内容前面(before)和后面(after)插入内容。语法:

p:before{
      content:'内容';
}
p:after{
      content:'内容';
}


给li标签添加多样图标

li前的图标可以是圆形,方形,椭圆等,可以是空心实心,可以是黑色,绿色,蓝色。。。简单的几行代码就能实现:

li:before{
      content:'';
      display:block;
      width:10px;
      height:10px;
      border-radius:10px;/**控制形状**/
      backgroud:#000;/**控制图标颜色**/
     margin-right:10px/**图标与文字距离**/
}


引入一张图片图标,对于特殊的图标,需要用图片完成的,同样可以before插入到页面中。

p:before{
     content:url(iconf.png);/**不可以加“”**/
} 

需要注意的是引入图片是content:后面不能用“”包起来,会被理解字符串做内容插入到页面中。

浏览器的兼容性

  • Chrome 2+,
  • Firefox 3.5+ (3.0 had partial support),
  • Safari 1.3+,
  • Opera 9.2+,
  • IE8+ (with some minor bugs),
  • 几乎所有的移动浏览器。


可以看出几乎是针对高级浏览器的一种元素。如果还没有意识的摈弃ie8以下的开发者这类元素并不适合你。在未来随着低版本的浏览器占的市场份额越来越小,像这类的元素应用将越来越频繁,以提高开发效率。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/820

关闭

font-awesome图标转为图片

font-awesome图标是字体,专业术语叫 Icon Font,本质上是使用 PUA ( Private Unicode Area )码位 Unicode 编码的字符,所以font-awesome图标、Bootstrap 的图标和 Wingdings 字体都是一样的,不一样的无非是编码。

Bootstrap图标

小图标icon是一个优秀Web中不可缺少的一部分,起到画龙点睛的效果。在Bootstrap框架中也为大家提供了250多个不同的icon图片。本文将详细介绍Bootstrap图标,Bootstrap框架中的图标都是字体图标

图标使用新姿势- react 按需引用 svg 的实现

图标是前端在业务开发中不得不写的一个东西,以我司的几个部门为例,每个组在写图标上都有不一样的方式:用户平台:单色图标用 iconfont 上提供的字体文件,彩色图标用 img 引入代替或者使用iconfont 上提供的 symbol.js 。

纯css制作电闪雷鸣的天气图标

使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案;after伪元素写下面的投影样式;before伪元素写黄色闪电的样式;用两个嵌套的div容器就可以了,父容器来控制图标显示的位置

阿里巴巴iconfont svg图标不能更改颜色的解决方法

svg图标 带有 fill 属性,如果选择的是多色图标且下载到本地的话,默认是带有颜色的。修改的话,需要在编译器里面打开 svg 然后将 fill 属性删除即可,然后在需要的时候使用 css 进行设置

网页中favicon.ico图标的作用、尺寸、制作

网站favicon.ico文件的用途很简单,就是在浏览器标签里,最前面显示的那个logo,对于网站 favicon.ico 图标的大小,建议大家选择 16x16 或者 32x32,再大也是完全没有必要的。favicon.ico

使用 node.js 从 iconfont.svg 文件中恢复单图标文件

阿里巴巴矢量图标库 (以下称iconfont)提供了方便的图标分享和管理功能。但是由于其图标项目独立于代码仓库,往往导致同一项目更换开发人员之后

设置网页浏览器标签小图标

在线生成ICO图标制作一个16*16 的.icon文件,文件名必须要favicon.ico,然后放在服务器根目录下面,一般浏览器会自动默认在跟目录下面查找。

reactnative 自定义项目的图标库

github比较火的有如react - native -vector- icons等图标库,为什么提到这些第三方库。首先明确一个点,你是否需要现成的第三方图标库?

html中为何经常使用<i>标签来作为小图标呢?

很多网站都是习惯使用<i></i>来代表小图标?而实际上用 <i> 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写),那么用<i>表示小icon,是出于好记的原因吗,还是看上去有点像icon?这样不是违背了语义化的原则吗?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!