icon 做成html形式,CSS icon的各种做法

一、图片法(img)

这是我们常用的在页面中引用图片的方法

首先从设计师那里拿到设计稿(psd或图片)，然后使用切图工具(比如PS)把你要的图扣出来(这里就不讲PS的操作了，因为我也不会@_@)，最后把图片放到你的页面中即可

这里以做三个图标为例

注意：用img标签时，为了保证图片为原始的比例，最好不要同时设置宽高(否则你的图片会很丑)，宽高只设置其中一个就好。

二、背景图法(background)

把上面的 img 标签换为 div ，把图片设置为 div 的背景图

HTML

CSS

.icons>.icon {

margin: 5px 25px;

border: 1px solid red;

display: inline-block;

width: 100px;

height: 100px;

}

.icons>.icon.qq {

background: transparent url(./qq.png) no-repeat 0 0; /* 不重复，以左上角对齐 */

}

.icons>.icon.sina {

background: transparent url(./sina.png) no-repeat 0 0;

}

.icons>.icon.wechat {

background: transparent url(./wechat.png) no-repeat 0 0;

}

效果和用 img 是一样的

这种方法的好处是好处：当改变 div 的宽高时，图片不会因 div 的大小改变而发生形变，如下图

三、background 合一法(雪碧图法)

如何生成雪碧图

网上随便找一个可以生成雪碧图的网站(搜索关键词css sprites generator)

例如这个网站 http://css.spritegen.com/

然后按照提示进行操作

最终得到一张合成图和一些代码

保存图片并将代码复制到你的页面中

雪碧图的原理

其实每个div的背景图都是一样的，如下

它只是通过background-position和overflow: hidden属性隐藏了其他的背景图，只显示我们想要看见的图，最终达到不同的div显示不同背景图的效果

四、font 法

iconfont-HTML形式(使用HTML转义)：

在 iconfont.cn 上找到你想要的图片并添加至项目

点击 Unicode 和在线链接生成代码

将生成的Unicode码和CSS代码复制到页面中

或者用下面这种方式

iconfont-CSS形式：

点击 Font class 生成 CSS 代码

将生成的 CSS 代码复制到页面中，并给标签添加类 class="iconfont icon-你的图标名" 引用(别问我为什么这么写，自己将CSS引用链接复制到浏览器中去看源码你就知道了)

iconfont-JS形式：

也就是下面的 SVG 法

五、SVG icon法(推荐用法)

点击 Symbol 生成 JS 代码并复制到页面中引用

打开开发者工具，我们发现这段 JS 代码在页面中创建了一个“隐形”的 svg 标签

点击使用帮助，找到下方的“symbol引用”

复制 CSS 代码和 svg 标签到页面中

效果如下：

使用 svg 的好处：

svg是矢量图，可以任意设置icon的宽高，调节大小

svg的图标默认是居中的

svg支持用CSS修改样式(颜色、渐变、动画等)

六、直接用 CSS 画icon

你可以搜索 cssicon.space 这个网站看看别人用 CSS 画的图标

用这种方式做 icon 的好处是：可以练习你的CSS功底

总结

一句话，用 svg 就完事儿了

icon 做成html形式,CSS icon的各种做法相关推荐

icon 做成html形式,一段生成iconfont预览html的代码
var fs = require('fs') var file = fs.readFileSync('./iconfont.css').toString(); var os = require('os ...
CSS——icon 全解
1.img法 2.background法 3.background合一法 4.font法 5.SVG法 6.CSS法(新手慎用) 一.切图使用PS等软件二.雪碧图CSS Sprites 三.ico ...
html怎么让图标动起来,让ICON生动起来纯CSS实现带动画的天气图标
让ICON生动起来纯CSS实现带动画的天气图标 1月 20, 2016 评论 (1) Sponsor CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都 ...
html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标
CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...
css icon设置,CSS之字体图标 icon 的多种实现
什么是icon?让我们先来看一个例子: 我们以简书为例子,图中看到的用圆圈起来的部分都是icon 这个时候你就想问了,这不就是几张图片么? 不,它不是图片,而是文字什么??这怎么可能是文字,文字怎么 ...
自定义icon，在iconfont.css中引入自定义图标
现有需求将png图标直接引入iconfont.css中,例如在el-input的icon中直接使用,解决办法如下: 第一步:找到icons中的iconfont.css 第二步:引入图标,iconfon ...
vue-ant design示例大全——icon与分隔符本地css/js资源
vue-ant design示例大全--a-icon与分隔符本地css/js资源目录 vue-ant design示例大全--a-icon与分隔符本地css/js资源 a-icon使用品牌图标简 ...
CSS - icon图标(icon font)
1. 概念这个小红点是图标,图标在CSS中实际上是字体. 2. 为什么出现本质是字体的图标? 2.1 图片增加了总文件的大小. 2.2 图片增加了额外的http请求,大大降低网页的性能. 2.3 图 ...
css icon旋转
图一1. 图二 2. 如图一 :当鼠标移动到1 的时候小三角旋转180度最终达到图2的样子假如小三角所在div的类名叫 release 小三角是背景图 .release_icon{ dis ...
vue3 element-ui el-date-picker选择日期后，悬停至日期icon时切换为清空icon
选择日期后鼠标经过输入框: 不经过时: element ui原来的icon是在左边并且两个icon都存在 <el-date-pickertype="datetime"v- ...

icon 做成html形式,CSS icon的各种做法

icon 做成html形式,CSS icon的各种做法相关推荐

最新文章

热门文章