写在前面 产品要求放大镜和文字放在一起.用定位,位置不准确,就会导致手机上错位,丑的一批. 进入正题 如何在input的 placeholder 中使用图标呢? 以阿里巴巴的矢量图标库为例, 现在有三种引入方式  Unicode . Font class . Symbol(为了多色). 我们现在引入方式是Font class . Symbol两种同时使用,Symbol仅仅是为了多色图标.又啰嗦了,进入正题进入正题. 注意要加图标类名 比如 iconfont 1.Unicode方式 1.不要直接赋

1.打开http://www.iconfont.cn官网,搜索你想要的图标.添加字体图标到购物车,点击购物车然后添加至项目,点击确定 2.点击图标管理/我的项目,找到对应的文件,点击Unicode,然后生成在线链接 3.新建iconfont.css文件,把在线生成的代码粘贴复制进去即可 4.定义使用iconfont样式,把下面代码复制到iconfont.css里面 .iconfont{ font-family:"iconfont" !important; font-size:16px;

背景 对于前端而言,图标的发展可谓日新月异.从img标签,到雪碧图,再到字体图标,svg,甚至svg也有了类似于雪碧图的方案svg-sprite-loader.雪碧图没有什么好讲的了,只是简单地利用了background-position来做图标定位.今天咱们先聊聊怎么使用字体图标和svg图标.其实字体图标也不陌生了,bootstrap,font-awesome,element-ui等UI库都基本标配了字体图标. 简单说下原理 unicode预留了E000-F8FF范围作为私有保留区域,这个区间

1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧会出现一个预览窗口,显示我们前面加入购物车的那些图标,我们选择页面中的下载代码 5.查看一下我们的下载包里面都有什么文件 6.使用fontclass方式其实在下载的文件里面demo_fontclass里面说的已经很详细了,我们在此基础上,再说明一下. 6.1font-class是unicode使用方

最近在学习 AIOSO(Alibaba Internal Open Source Organization,即阿里巴巴内部开源组织) 的一个子项目MMCherryUI,这是一个流式布局,可以在运行时做动态改变子元素的个数(增删查改), 并内建动画效果,先贴一张效果图出来 我们学习代码,最重要的就是动手实践.于是,我想自己去实现一个类似上面效果的页面.首先,我需要页面上的几张 icon 图标,去哪里找?上 iconfont.cn 找,里面的 icon 最全了.这时候我脑子里浮现了一个问题,我是使用

昨日内容回顾 浮动:是css中布局最多的一个属性 有浮动,一定要清除浮动 浮动不是一个元素单独浮动,要浮动一起浮动 清除浮动四种方式: 1.给父盒子添加高度,一般导航栏 2.给浮动元素后面加一个空的块标签, 并且设置clear:both 3. 伪元素清除法 给父元素设置 .clearfix:after{ content:'.', display:block; clear:both; height:0; visibiable:hidden; } 4.给父元素overflow:hidden 块元素与

首先你要有一个图标库的账号,我们使用的是阿里矢量图标库,其次你要有一套已经设计好的图标原图.如果你具备了这些,就可以和我一起看iconfont的使用姿势了. 写在前面 不结合其他矢量库或UI框架一起使用的方法,可以参照官网的指示进行操作:http://iconfont.cn/plus/help/detail?helptype=code 也可以在稍后下载到本地的官方demo中学习如何使用. 如果结合其他矢量库一起使用则有一些需要注意的问题和一些操作.我们的项目是用的ant design,因此本文记

uni-app 的uni-ui 的 Icon 图标组件,裡面的图标只是移动端常见的图标,对于一些其他需求所要显示的图标,这个是完全不够用.那么怎么办?模仿它的组件,用阿里巴巴图标矢量库的图标,自己定义一个图标组件呀. 一.uni-app 图标组件 1.组件文件m-icon里面有两个文件,一个是m-icon.css文件一个是m-icon.vue文件 2.m-icon.css 3.m-icon.vue 4.使用 上面就是uni-app 官网的例子.接下来我们就参考这个自己写一个组件. 二.新建组件

iconfont对于前端应用来说有很多便捷: 1.自由变化大小 2.自由修改颜色 3.可以添加一些视觉效果如:阴影.旋转.透明度. 4.兼容IE6 在线引用和下载到本地两种方法 一.在线引用 图标的制作和上传可以参照官网给出的文档:Page 1 图标的下载和使用官网上说的不是很清楚,简单介绍下: 1.首先在Iconfont-阿里巴巴矢量图标库(微博登录)上面将你需要的图标点击购物车按钮加入“暂存架” <img src="https://pic2.zhimg.com/6a10

FROM:http://www.cnblogs.com/daxiong2014/p/4768681.html 1.ASCII码          我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态,这被称为一个字节(byte).也就是说,一个字节一共可以用来表示256种不同的状态,每一个状态对应一个符号,就是256个符号,从0000000到11111111.        上个世纪60年代,美国制定

关于 unicode utf8 文章来自于 http://blog.csdn.net/tge7618291/article/details/7599902 ascii 主要来表示英文.但是要全世界那么多语言符号文字,ascii就不够使用了,为了统一,unicode出现了. unicode 包含全世界所有的语言文字的编码方案.对于每个字符都有一个规定的二进制代码. 需要注意的是, "Unicode只是一个符号集, 它只规定了符号的二进制代码, 却没有规定这 个二进制代码应该如何存储".

很多国外的网站,访问的时候可以看到,页面先是大面积白一下,然后恢复正常.原因是网页上用到了 webfont,这些页面很多情况都是直接引用 google 的 webfont 地址,中华大局域网下,由于网络原因,页面虽已经全部加载,引用的 webfont 资源却还未下载成功,这就导致了使用了 webfont 的内容呈现空白状态,没有被渲染出来. 如,访问该网站:http://zurb.com/playground/foundation-icon-fonts-3 为啥国内很少有这种事儿发生?英文字符并

随着计算机的发展.普及,世界各国为了适应本国的语言和字符都会自己设计一套自己的编码风格,正是由于这种乱,导致存在很多种编码方式,以至于同一个二进制数字可能会被解释成不同的符号.为了解决这种不兼容的问题,伟大的创想Unicode编码应时而生!! Unicode Unicode又称为统一码.万国码.单一码,它是为了解决传统的字符编码方案的局限而产生的,它为每种语言中的每个字符设定了统一并且唯一的二进制编码,以满足跨语言.跨平台进行文本转换.处理的要求.可以想象Unicode作为一个"字符大容器&qu

一．图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般外置字体一样的使用,因此Winform.WPF中都是可以用的. 在我们多个WPF项目中广泛使用了图标字体,包括自定义控件.自定义样式.模板等.总结下: 网上开源字体图标很多,很容易获取,项目开发中需要的绝大部分图标都可以找到,非常方便,推荐 阿里巴巴开源字体: 字体文件非常小,比使用png等图片文件

本文出处 http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html 只是为了记录一下省得要去搜. 今天中午,我突然想搞清楚Unicode和UTF-8之间的关系,于是就开始在网上查资料. 结果,这个问题比我想象的复杂,从午饭后一直看到晚上9点,才算初步搞清楚. 下面就是我的笔记,主要用来整理自己的思路.但是,我尽量试图写得通俗易懂,希望能对其他朋友有用.毕竟,字符编码是计算机技术的基石,想要熟练使用计算机,就必须懂得一点

1.ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态,这被称为一个字节(byte).也就是说,一个字节一共可以用来表示256种不同的状态,每一个状态对应一个符号,就是256个符号,从0000000到11111111. 上个世纪60年代,美国制定了一套字符编码,对英语字符与二进制位之间的关系,做了统一规定.这被称为ASCII码,一直沿用至今. ASCII码一共规定了128个字符的编码,

1. 经常有运营反应,客户端展示的feed列表有重复的问题. 重复问题分为两种,一种是两条新闻标题类似,另一种是两条新闻标题是完全相同. (1)标题类似 原来过滤的逻辑,是两个标题完全相等,才认为两条新闻内容一样,后来改进了一下,比较两个标题的相度,如果相似度超过70%,那么就认为这是同一条新闻,如(北京今日降大雨,公交停运   and 北京降大雨,公交停运)这两条新闻 相似度超过了70%,那么就把其中的一条过滤掉,过滤的算法 public static double getSimilarity

转自:http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html 作者: 阮一峰 日期: 2007年10月28日 今天中午,我突然想搞清楚Unicode和UTF-8之间的关系,于是就开始在网上查资料. 结果,这个问题比我想象的复杂,从午饭后一直看到晚上9点,才算初步搞清楚. 下面就是我的笔记,主要用来整理自己的思路.但是,我尽量试图写得通俗易懂,希望能对其他朋友有用.毕竟,字符编码是计算机技术的基石,想要熟练使用计算机,

前言 近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从而达到减小应用体积的目的(这样避免了@2X图和@3X图的使用,只需要一个字体图标就可搞定).如需在项目中使用iconfont技术,图标矢量图一开始都应合并转化为字体库(这属于UI设计师的工作了).在这里会简单说明怎么生成字体库和简单的使用!此技术缺点也很明显,只适用于纯色的icon! 字体库生成 针

作者: 阮一峰 日期: 2007年10月28日 今天中午,我突然想搞清楚Unicode和UTF-8之间的关系,于是就开始在网上查资料. 结果,这个问题比我想象的复杂,从午饭后一直看到晚上9点,才算初步搞清楚. 下面就是我的笔记,主要用来整理自己的思路.但是,我尽量试图写得通俗易懂,希望能对其他朋友有用.毕竟,字符编码是计算机技术的基石,想要熟练使用计算机,就必须懂得一点字符编码的知识. 1. ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)

第一步 在AI中画好矢量图,或者是在PS中将纯色的图片存成PNG格式,最好是放大很多倍的纯色图片.因为导入到fontcreator中会显得很小,如果不是矢量,图片拉大后就会有锯齿状. 第二步 选中AI中的矢量图形复制,打开fontcreator,选择一个已经安装过的字体或是选择新建工程,这里采用新建工程来演示. 一般前几个空着的不要动,选择A后点击插入字形就会有这样一个空白的格子,选择这个空白的格子右键 右键然后选择属性,代码点里可以从$E000开始往后写,写完后记得点击右边的闪电标志,进行检索