css图标

一个标签的72变，打造一个纯CSS图标库

每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不甚满意. 终于下定心思来改造一个可缩放的图标库.github先上:https://github.com/qieguo2016/iconoo,目前提供下载link标签引入和npm+webpack的引入方式,详见项目的readme.(喂,来个star!).上图: 关于改造,一开始的想法就是使用百分比尺寸…

一.介绍采用这种字体,我们可以避免网站制作中采用好多图片,一方面解决了浏览器的兼容性问题.另一方面,这些字体都是矢量字体,我们只要在调整这些图标时,将他们的字体大小以及颜色,我们就可以解决很多不是图片的图标了. 二.使用原因今天在用到jquery.mmenu.js过程中(手机上的单个按钮菜单,具体将在下一节讲到),也是从网上找到的一个简单的demo,很简单的,如下图: 于是我把它拿下来进行研究,但是所有元素都拿下来了,就是有一个图标不显示,如下图. 研究了半天,终于发现了问题所在!由此也进一…

手把手教你打造一个纯CSS图标库

来,干了这碗安利写这篇文章的目的其实就是为了安利一下我的图标库:iconoo,所以,开门见山,star吧少年少妇们!(这样的我是不是应该要加个github互粉的团伙了?) 主题说完了,下面进入正题. 在web开发中,我们经常要用到一些小图标(加减勾叉等).通常做法就两种: 直接使用图片: 使用css/svg直接在浏览器中绘制图标. 方案1:由于图标图片比较多,而且体积很小,为了减少请求所以很多时候我们会用雪碧图这种技术来将图标拼凑在同一张图片里面.你也能想到,一堆图标的雪碧图,修改维护会相当麻…

css:图标与文字对齐的两种方法

(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种对img设置竖直方向对齐为middle, <div> <img src="" alt="" class="heart"> <span>1169</span> <img src="" alt=&qu…

css图标库 font-awesome.min.css

下载font-awesome-4.4.0 同时引入font-awesome-4.4.0.min.css 通过<i class='fa fa-sign-out'></i>生成图片很好用…

CSS图标文字不对齐

页面排版经常遇到‘图标+文字’的需求,正常样式写下来是这样 , 但产品要的应该是长这样 ,怎么办呢?其实很简单,加个样式看看 vertical-align: top/middle/bottom; 浏览器都支持,当然后面的值是上对齐,下对齐,还是居中就要你自己去发挥喽-…

css图标与文字对齐实现方法

1.移动端(安卓设备.ios设备)图标文字垂直居中对齐的最佳常用解决方案是采用弹性盒子布局,可以快捷有效实现子元素未知高度绝对垂直居中对齐.PC端考虑到兼容性的问题,一般不推荐使用弹性盒子,依旧只能采用传统方式(vertical-align: middle;或者position定位)实现图标文字对齐. 2. 实际上不管是line-height还是用position去定位,不管你display用的什么,不同机型的显示效果都会不一样. 水平上的差距几乎没有,垂直方向上的效果会多种多样. 遇到这种ui…

CSS图标与文字对齐的两种方法

在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种对img设置竖直方向对齐为middle, <div> <img src="" alt="" class="heart"> <span>1169</span> <img src="" alt="" class="comment"&g…

css 图标旋转中

.person-loading .loading-icon{position: absolute;top: 14px;} i.loading-icon{width: 15px;height: 15px;background-position: 0 -90px;-webkit-animation: loading 1s linear infinite;} @-webkit-keyframes loading { from { -webkit-transform: rotate(0deg) tran…

css兼容各个浏览器的三角形图标

css兼容各个浏览器的三角形图标在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹毛求疵”,越来越多的前端开发者开始“返璞归真”,在能不使用图片的场景中减少图片使用,css图标相对于图片还有个优势是我们可以方便的定制图标的大小以及颜色. css实现三角形图标已不是什么新鲜技术,之前也有很多相关的技术文章,这篇文章主要是分析下在实际场景中使用时遇到的问题以及如何回避这些问题.基本原…

纯css实现网络图标

<html> <head> <title>css图标</title> <meta charset="utf-8"> </head> <style> .box{ width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid tra…

一步步打造自己的纯CSS单标签图标库

图标作为网页设计中的一部分,其在凸显网页重要元素特性,视觉交互.引导以及网页装饰等充当的角色作用举足轻重.由于图标普遍具有尺寸小的特点,在项目实践时不宜将每个图标作为单个图片元素进行加载,这会增加Http请求,影响网页的性能.因此,在实际中,我们可能见到以下一些常见的解决方案: 将多个图标按照一定排列顺序合并在一个图片里(即sprite图),再通过CSS设置元素的background-position来为元素设置背景从而展示图标将单个图标元素转成base64格式,并在CSS声明背景使用SVG…

《CSS核心技术详解》

前言看似简单的CSS,却暗藏玄机,那是我们摸爬滚打好长时间后悟出的真理. 在很长的一段时间里,我并没有重视CSS,觉得CSS很简单,无非就是一些属性:后来才发现自己小看了CSS,对CSS的了解实在是太少,尤其是对其核心概念的理解太模糊,实际上它有很多神奇的地方并不为大家所知.对于一个新手来说,只知道一些理论但在实际开发中不会使用是不行的,于是笔者萌生了写作本书的最初想法. 市面上介绍CSS基础的书已经有很多了,已经没有必要再去重复,但是一些核心的内容还是很有必要写出来的,因为我发现很多前端朋友…

JQuery Mobile - 自定义图标！

环境 jquery1.9.1.js jquery mobile 1.4.2版图标制作 18x18px 底透明的png图标使用图标,这个过程开始怎么弄都不行,只有个灰色的圆出现,不见图标:或者出现图标,但位置不对,经过看jquery demo,终于知道了如何使用步骤如下 1 .当然是定义你的css图标类了 .ui-icon-myicon:after { background-image: url("img/title.png"); /**你的图片,路径是相对于当前使用文件可以访问到…

iconFont 阿里巴巴矢量图标使用方法

挑选图标的过程(共6步) 进入网站:Iconfont网址:http://www.iconfont.cn 点击网站上方的“官方图标库”,选择自己喜欢的图标.在这里我选择天猫的图标库. 选择好自己喜欢的图标,你可以有两个选择,下载代码和添加至项目. 我们这两选择添加至项目,然后新建项目,并输入名称. 项目添加好后,会自动给我们转入到我们项目库中.点击查看在线链接. 生产css引入的代码,生成后就可以在项目首页index.html引入了. <link rel="stylesheet"…

Atitit..css的体系结构

Atitit..css的体系结构 1. Oocss 与 bem标准化1 1.1. 四种样式表及六种选择器1 1.2. 常用的css框架 amazeui bootstrap1 1.3. Css图标1 1.4. Css的操作api1 1.5. Css ide ::2 1. Oocss 与 bem标准化 1.1. 四种样式表及六种选择器 HTML选择器 ·类选择器 ·ID选择器 ·关联选择器 ·组合选择器 ·伪元素选择器作者:: ★(attilax)>>> 绰号:老哇的爪子 (…

完美CSS文档的8个最佳实践

在css的世界,文档没有被得到充分的利用.由于文档对终端用户不可见,因此它的价值常常被忽视.另外,如果你第一次为css编写文档,可能很难确定哪些内容值得记录,以及如何能够高效完成编写. 然而,为CSS编写文档可以为你的项目提供很多好处:促进更好的代码实践.降低新员工的上手难度.在本文中,我将说明编写CSS文档的优点,并分享我认为的最佳实践.让文档为你工作,而不是阻碍你的工作. 1. 制定基本规则当你和你的团队不清楚CSS文档具体需要编写哪些内容.文档应该如何工作时,你很难跟上编写CSS文档…

Html/CSS 示例演练图书馆后台界面

示例演练(html css javascript) --制作图书馆后台界面 1. 成品图…

移动web前端小结（一）--摘自小鹿_同学

一.框架框架:Bootstrap+HTML5 Boilerplate. 两个框架整合到一起可以看一下这位大神的文章:<使用 Bootstrap 和 HTML5 Boilerplate 开始一个项目>. 二.相关知识点 1.Meta标签控制显示区域(在PC端也会用到): <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name=&quo…

EasyUi – 1.入门

1.页面引用. jquery,easyui,主题easyui.css,图标ico.css,语言zh_CN.js <script src="Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script> <script src="Scripts/jquery-easyui-1.3.2/jquery.easyui.min.js"></script> <link h…

python 学习笔记十二 html基础（进阶篇）

HTML 超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分.网页文件本身是一种文本文件,通过在文本文件中添加标记符, 可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等).浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误, 且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位.但需要注意的是,对于不同的浏览器,对同一标记符可能会有…

jquery_easyui的使用

一.引入jquery,jquery_easyui,jquery_easyui css,图标css,本地语言二.通过学习jquery_easyui 手册,用简单的js代码来实现(按钮.表单.表格.弹出框)等各种效果 1.Parser(解析器) 2.Draggable(拖动) <body> <div id="box" style="width:400px; height:200px; background:orange"> <span i…

easyui 入门

http://www.cnblogs.com/tangge/p/3214496.html 1.页面引用. jquery,easyui,主题easyui.css,图标ico.css,语言zh_CN.js <script src="Scripts/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script> <script src="Scripts/jquery-easyui-1.3.2/jquery.easy…

html--整站制作

1.样式初置 body,div,ul,ol,h1,h2,h3,h4,h5,p,form,input,textarea,select{margin:0;padding:0;} li{list-style:none;} a{text-decoration:none;} img{border:none;vertical-align:top;} input,textarea{outline:none;} textarea{resize:none;overflow:auto;} body{font-siz…

移动web前端小结（一）

这段时间做了几个移动项目的前端页面,姑且称之webapp.做这几个项目之前根本没接触过移动端的相关知识,以为和PC端页面没啥区别无非就是尺寸小一点罢了.上手以后发现问题颇多.下面从框架.相关知识点.遇到的问题.解决办法,以及依旧存在的困惑进行总结.因为刚接触1个多月时间,多处不足,希望各位大神能为我解惑,拜谢~~ 一.框架框架:Bootstrap+HTML5 Boilerplate. 两个框架整合到一起可以看一下这位大神的文章:<使用 Bootstrap 和 HTML5 Boilerplate…

html学习笔记 - meta link

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta name = "keywords" content = "用来给搜索引擎搜索的关键字"> <!-- 描述在百度搜索…

2017年总结的前端文章——border属性的多方位应用和实现自适应三角形

border属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标等),利用css3新增的属性值(如使用图片填充边框)可以实现一些更复杂的效果. 本文不介绍border的属性的基本应用方法,将直接介绍如何通过border属性实现一些常见的效利用border画三角形和梯形等多边形在CSS中,常见的平面图形为矩形以及圆形.但是难免有些情景需要我们利用CSS去绘制三角…

fab 菜单实现之前传-钟表表盘

个人很喜欢谷歌的material design,很喜欢但是没有动手弄过,今天想动手操作一下Floating Action Button菜单,网上有很多种:圆形.扇形.射线.直线等.我想在一个例子中用到这几种展现形式,触发按钮在不同的位置,菜单用不同的方式展示…… 基于这种需求,开始着手准备,此时遇到一个问题,就是计算弹出按钮的位置,开始的时候也没有多想就开始一个一个的计算位置了,在计算的过程中发现有的坐标是一样的(这里采用弹出四个菜单),在计算对应的圆形.扇形.半圆形菜单的位置时感觉还好是有一定…

h5做列表水平分割

移动端H5各种各样的列表的制作方法(三) by FungLeo 移动端H5各种各样的列表的制作方法(三) by FungLeo 前情回顾在上一篇博文<移动端各种各样的列表的制作方法(二)>中,我们再通过两个DEMO,演示了一下在移动端H5中更多需求的列表制作.不过,看起来,好像还是蛮简单的.这一章,接着深入. 如果你是先看到的这篇文章,建议您先去上面的链接,把对应的内容给看一下,这样上下文连贯,更容易理解本文的内容. 带小图标的列表上面两章,我们做了一些普通的列表.而在移动端H5中,我们经…

jQuery Grid入门指南

上周需要把一个项目中的普通table改成使用jQuery插件形式的表格,找到了jqgrid这个插件,本以为找个demo,查查api就能解决,没想到还是费了一番的功夫,在这里记录总结一下. 本文实现的内容主要有:基础表格的绘制,实现分页功能,将jqgrid修改为响应式表格. 先贴一张表格样子图 jqgrid源码下载地址:https://github.com/tonytomov/jqGrid 英文api:http://trirand.com/blog/jqgrid/jqgrid.html 英文dem…

【css图标】的更多相关文章