css之字体图标

SVG与字体图标

SVG图片是矢量图片,不会随着图片的伸缩而影响质量,通常把只有一种颜色的图标做成SVG,通过SVG生成字体图标,放到项目中使用。

https://icomoon.io/是一个比较快捷的生成字体图标的线上工具,进入主页后,点击右上角IconMoon App按钮,进入图标制作页面。
这里写图片描述

页面上有很多官方提供的默认图标。点击左上角“Import Icons”可以导入自己的svg。
这里写图片描述

再点击右下角Generate,然后download就可以了。下载之后,有详细的使用demo,非常方便。
这里写图片描述

fonts目录下是字体文件,引入到项目中,并引入style.css。按照demo.html的示例来用就可以了。
这里写图片描述

之前也用过其他字体图标生成工具比如http://iconfont.cn,但感觉不如https://icomoon.io/快捷。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247629.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

研发阶段模拟接口数据

因为在vue-cli工程中需要创建很多.vue文件,我们希望创建vue文件和创建html、css、js文件一样右键即可选择创建,并且创建的文件中可预先写好模板代码。 webstorm-Preferences打开选项界面 选择File and Code Templates,点击绿色加号 填…

真实项目中 ThreadLocal 的妙用

一、什么是 ThreadLocal ThreadLocal 提供了线程的局部变量,每个线程都可以通过 set() 和 get() 来对这个局部变量进行操作,但不会和其他线程的局部变量冲突,实现了线程间的据隔离。 简单讲:一个获取用户的请求线程 A,…

css之flex布局

flex布局是css3中的重要布局方式,称为“弹性布局”,每次想到它主要是遇到元素垂直居中、元素宽高自适应的问题,这些问题在flex中都能过简单设置就解决,它更像是原生APP中的布局操作,布局不必写N多的盒模型代码来实现&a…

javascript对URL中的参数进行简单加密处理

javascript的api本来就支持Base64,因此我们可以很方便的来进行编码和解码。 var encodeData window.btoa("namexiaoming&age10")//编码 var decodeData window.atob(encodeData)//解码。 下面来个具体的例子来说明如何对url中参数进行转码&#xff…

HTML元素title里面如何换行

在调试代码的时候我就遇到一个问题,HTML元素title里面通常只显示一行,那我想要他换行,就是多行显示,如何实现?JS代码里面比如Alert里面又该如何换行? 经过我的一番实验 要实现这种效果有几种方法&#xff0…

div内图片和文字水平垂直居中

大小不固定的图片、多行文字的水平垂直居中 本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。 关于图片垂直居…

敏友的【敏捷个人】有感(3): 有感于“敏捷个人”讨论与练习

2010年我对个人管理进行了自己的一些思考,在2011年提出敏捷个人概念,并且在线上、线下进行了多次交流,在一些大会上也做过分享。现在,已经有很 多IT和非IT的敏友们知道并在践行敏捷个人,帮助自己更快的成长。我收到大家…

jQuery编写插件

引言: 在项目中不同页面经常要用到已经写好的交互,比如弹窗,比如下拉菜单,比如选项卡,比如删除... 此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情,而且个人认为有些low了,我们…

webstorm中nodejs代码提示

preferences->languages&frameworks->Node.js and Npm中选择一个本地的node版本 preferences->languages&frameworks->JavaScript->Libraries 勾选node.js Core 回到代码

Array.prototype.slice.call(arguments)

Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组,除了IE下的节点集合(因为ie下的dom对象是以com对象的形式实现的,js对象与com对象不能进行转换)如:1 var a{length:2,0:first,1:second}; 2 Ar…

nodejs常用模块-url

URL nodejs中针对url的常用方法。 node下打印url,结果: 引入url模块 var url require(url) 1、parse方法 将url解析成对象,parse方法原型: url.parse(urlStr[, parseQueryString][, slashesDenoteHost]) 可传递三个参数…

常用的javascript设计模式

请坚持 什么是设计模式 百度百科: 设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。 使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问,设计模式…

iOS警告-This block declaration is not a prototype

关于警告 我们定义一个不带参数的block,通常是如下的方式 1typedefvoid (^UpdateSwichBtnBlock)();在xcode9中会提示一个警告 12This block declaration is not a prototypeInsert ‘void解决方式可以是如下的几种 1typedefvoid (^UpdateSwichBtnBlock)(void);但是这样,很多第三…

mongoose操作mongodb

http://mongoosejs.com/docs/api.html#index-js mongoose是nodejs环境下操作mongodb的模块封装,使用mongoose之后,实际上只需要在mongodb中创建好数据库与用户,集合的定义、创建、操作等直接使用mongoose即可。 一、连接二、重要概念三、基本…

mac下iterm配色、半透明与样式设置

主要为了实现命令行颜色高亮与整个命令窗口半透明效果。 1、配色主题包下载 1、http://iterm2colorschemes.com/ 下载后解压,到iterm2中,左上角iTerm2->preferences->Profiles,右侧面板找到Colors选项,右下角展开Color Pr…

一个 Dubbo 服务启动要两个小时

前几天在测试环境碰到一个非常奇怪的与 dubbo 相关的问题,事后我在网上搜索了一圈并没有发现类似的帖子或文章,于是便有了这篇。 希望对还未碰到或正在碰到的朋友有所帮助。 现象 现象是这样的,有一天测试在测试环境重新部署一个 dubbo 应用的…

表单提交enctype参数详解之:application/x-www-form-urlencode和multipart/form-data

application/x-www-form-urlencode 我们在提交表单的时候,form表单参数中会有一个enctype的参数。enctype指定了HTTP请求的Content-Type。 默认情况下,HTML的form表单的enctypeapplication/x-www-form-urlencoded。 application/x-www-form-urlencoded是…

内网端口映射工具

由于开发微信需要一个公网域名,需要将本地端口映射到外网域名,最热的工具是ngrok,但被微信屏蔽了,这里使用的是natapp,环境是mac,windows下可使用nat123、花生壳等工具实现同样功能。 简单记录一下过程。 …

iOS----------iPhone导出手机所有短信

第一步:手机连接到itunes 选择本电脑备份 备份的时候不要加密 然后立即备份 第二步:前往文件夹,找到itunes的备份路径~/Library/Application Support/MobileSync/Backup 在这目录下搜索 3d0d开头的文件,这就是 iPhone 短信的…

跨站点脚本(XSS)

1. 简介 跨站点脚本(XSS)是当前web应用中最危险和最普遍的漏洞之一。安全研究人员在大部分最受欢迎的网站,包括Google, Facebook, Amazon, PayPal等网站都发现这个漏洞。如果你密切关注bug赏金计划,会发现报道最多的问题属于XSS。为了避免跨站脚本,浏览器也有自己的过滤器,但安…