1.HTML + Font 方式:

  修改图标颜色只需修改字体颜色,修改图片大小只需修改字体大小。

  关于字体图片,我们可以自己制作,也可以从网上下载 阿里巴巴矢量图库在线图标字体库Icomoon.com等。

2.IcoMoon:

  是一个在线的图标字体生成器。其允许我们通过个性化设置生成ICON字体,我们可以上传本地ICON资源也可以使用IcoMoon给我们提供的丰富素材,最终生成的ICON字体有多种格式供我们选择(EOT, SVG, WOFF, TTF)。

  具体转换步骤参考: 使用IcoMoon生成图标字体 https://www.jianshu.com/p/86fca912fd1d,转换之后下载即可。

3.解压下载后的压缩包,复制 fonts、css 文件到同一个文件下(主要是因为 css 文件中的 URL 设置),页面中 引入 css 文件,

4.在需要的页面引用,直接加到相应标签的 class 属性中,作为样式引用即可。

  .icon-trash-can:before 伪元素来产生字符图标,其中 “before” 表示字符出现在左边,“after” 则出现在右边。

5.字符图标的优点

  ·可以很容易任意地缩放;

  ·很容易地改变颜色;

  ·很容易地产生阴影;

  ·可以拥有透明效果;

  ·可以做出跟图片一样可以做的事情(改变透明度、旋转度,等);

  ·本身体积更小,但携带的信息并没有削减。

  与位图比较:

    ·位图图片不能很好地进行缩放,当图片进行放大时会失真(即变模糊),当图片进行缩小时就会浪费掉像素;

    ·而且位图每加载一张图片都需要一次 “http请求”,因此也拖慢了整个加载页面的时间。

SVG小图片格式显示(字符图标,可设置title属性)的更多相关文章

  1. js svg转图片格式

      1.情景展示 闲来无事的时候,发现chrome扩展程序里面有图像,本想下载下来,却发现文件格式是svg格式,如何将svg文件改成图片格式? chrome-extension://jlgkpaici ...

  2. C++ CEF 浏览器中显示 Tooltip(标签中的 title 属性)

    在 Windows 中将 CEF 集成到 C++ 客户端以后,默认是无法显示 tooltip 的,比如图片标签中的 title 属性. 实现的方式其实很简单,按下面的步骤操作就可以: 创建一个文本文件 ...

  3. 使用innerHTML属性向head中插入字符时报“无法设置 innerHTML 属性。 该操作的目标元件无效”的错误

    向head中动态插入script文件,代码如下: var sc = document.createElement("script"); sc.src = "//www.c ...

  4. 如何把SVG小图片转换为 html字体图表

    自制作的简单字体图表使用案例:查看demo 制作步骤: 1:登录制作工具在线网站 https://icomoon.io/ 2:右上角红色 按钮进入到:https://icomoon.io/app/#/ ...

  5. png、jpg、gif三种图片格式的区别

    png.jpg.gif三种图片格式的区别   2014-06-17 为什么想整理这方面的类容,我觉得就像油画家要了解他的颜料和画布.雕塑家要了解他的石材一样,作为网页设计师也应该对图片格式的特性有一定 ...

  6. jpg、png、gif图片格式的浅析

    原文地址:图片格式与设计那点事儿 之前面试时被面试官问到了jpg.gif.png格式的区别,当时就扯了一些,感觉都是扯淡,上网搜了下,分享一篇文章 第一次写技术博客,有不尽如人意的地方,还请见谅和指正 ...

  7. 我的Android最佳实践之—— ImageView中图片拉伸显示

    通过设置android:scaleType="fitXY"使得图片拉伸显示.补充:scaleType的属性有matrix(默认).center.centerCrop.centerI ...

  8. 图片的title属性和alt属性的区别

    在前端开发中,经常遇到有人在问图片的alt属性和title属性的区别,这是因为很多人对于alt属性和title属性没有彻底搞明白,今天零度给大家分析分析. title属性 首先,来看一下什么是titl ...

  9. Logo小变动,心境大不同,SVG矢量动画格式网站Logo图片制作与实践教程(Python3)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_207 曾几何时,SVG(Scalable Vector Graphics)矢量动画图被坊间称之为一种被浏览器诅咒的技术,只因为糟糕 ...

随机推荐

  1. Linux下的ssh、scala、spark配置

    注:笔记旨在记录,配置方式每个人多少有点不同,但大同小异,以下是个人爱好的配置方式. 目录 一.配置jdk 二.配置ssh 三.配置hadoop 四.配置scala 五.配置spark 平台:win1 ...

  2. MySQL运维开发之路

    MySql h1 { color: rgba(0, 60, 128, 1); text-align: center } h1:hover { color: rgba(0, 255, 111, 1) } ...

  3. python input函数

    函数 input() 让程序暂停运行,等待用户输入值,之后再把值赋给变量,输出.

  4. python12day

    昨日回顾 可迭代对象: 可以更新迭代的实实在在的值. 内部含有'__iter__'方法. str.tuple.dict.set.range 优点:操作方法多,灵活直观 缺点:占用内存. 迭代器: 可以 ...

  5. Pycharm 实现保存时修正格式(format_on_save)

    前言 VSCODE是近年来备受欢迎的轻量级代码编辑器,有一项非常实用功能--保存时修正代码格式(formatonsave) Pycharm作为一款IDE,虽然本身不具备此功能,但通过几个并不复杂的设置 ...

  6. c#序列化和反序列化《转载》

    (一)使用总体说明 .net framework的类库中提供了三个可以用于序列化和反序列化的类,分别为BinaryFormatter.SoapFormatter和XmlSerializer. Bina ...

  7. ApacheCN jQuery 译文集 20211121 更新

    创建 jQueryMobile 移动应用 零.序言 一.jQueryMobile 原型制作 二.jQuery Mobile 网站 三.分析.长表单和前端验证 四.QR 码.地理位置.谷歌地图 API ...

  8. python编写购物车

    上次的学习又没有坚持下来,工作忙的不可开交,但我反思了一下还是自己没有下定决心好好学习,所以这次为期3个月的学习计划开始了,下面是这次学习后重新编写的购物车初版代码. 1 # 功能要求: 2 # 要求 ...

  9. Java.lang.Math类详解

    Math类位于Java.lang包中,包含用于执行基本数学运算的方法!Math类的所有执行方法都是静态方法,可以直接使用类名.方法名调用,如:Math.round() 常用的方法:Math.round ...

  10. 关于setInterval方法中function的定义方法

    使用window对象的setInterval方法,作为第一个参数传递的function必须在全局作用域中定义,否则会出现报错而无法执行. 具体如下: 在下面的代码中,试用jQuery方式在回调函数中使 ...