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. Nginx限制连接控制访问量

    目录 一:限制连接数模块(同时访问网址能访问多少次) 1.修改网址模块文件 2.测试 3.重启 4.增加解析ip 5.压力测试 二:控制Nginx访问量 1.连接池 2.限制数 3.测试 4.重启 5 ...

  2. Kubeadm部署K8S(kubernetes)集群(测试、学习环境)-单主双从

    1. kubernetes介绍 1.1 kubernetes简介 kubernetes的本质是一组服务器集群,它可以在集群的每个节点上运行特定的程序,来对节点中的容器进行管理.目的是实现资源管理的自动 ...

  3. Homework_2

    禁 止 吃 瓜 我是小鱼 刚才有个同学问我小鱼发生肾么事了 我说怎么回事? 给我发了一个张截图,我一看! 噢!原来是昨天发布第二次寒假作业了 我大一了啊没有闪 来!偷袭!我三岁的小同志 当时就流眼泪了 ...

  4. TensorFlow 机器学习秘籍中文第二版·翻译完成

    原文:TensorFlow Machine Learning Cookbook 协议:CC BY-NC-SA 4.0 不要担心自己的形象,只关心如何实现目标.--<原则>,生活原则 2.3 ...

  5. python编写购物车新写法

    用另一种方式完成购物车的功能实现 #!/usr/bin/python zijin = input("请输入资金:") if zijin.isdigit(): zijin = int ...

  6. idea创建WebService服务端和客户端

    创建服务端 1.file–>new–>project 2.点击next后输入服务端名,点击finish,生成目录如下 3.在 HelloWorld.Java 文件中右击,选 WebServ ...

  7. Git Push 免输 用户名和密码

    前言 在大家使用github的过程中,一定会碰到这样一种情况,就是每次要push 和pull时总是要输入github的账号和密码,这样不仅浪费了大量的时间且降低了工作效率.在此背景下,本文在网上找了两 ...

  8. docker基础——4.网络待补

    docker network ls bridge:NAT桥 host:共用宿主机namespace的UTS.IPC.Network none:只有lo,没有网卡 其他待补

  9. LeetCode随缘刷题之最短补全词

    package leetcode.day_12_10; import org.junit.Test; /** * 给你一个字符串 licensePlate 和一个字符串数组 words ,请你找出并返 ...

  10. Hadoop文件操作常用命令

    1.创建目录 #hdfs dfs -mkidr /test 2.查询目录结构 #hdfs dfs -ls / 子命令 -R递归查看//查看具体的某个目录:例如#hdfs dfs -ls /test 3 ...