css content 如何自定义生成图标?

作者:黑猫
链接:https://www.zhihu.com/question/22022905/answer/20051701
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

这个是webfont

在css里面,如果想使用某个字体,但是又担心用户电脑上没有,就可以使用font-face属性从服务器上引用这组字体。具体怎么用,搜一下font-face就很清楚了,不多说。

其中不太明白的是\f309
这一段css表示:
在节点#twitter前面,插入一段内容("\f309")。
这个内容("\f309")是一个字符,f309是这个字符的16进制unicode编码。
不理解可以把 "\f309" 改成 "\6211" ,然后查看效果。事实上 content:"" content:"\6211" 的含义是一样的。

需要知道,计算机里面每个字符都有一个unicode编码,比如「我」的unicode是6211(16进制),而字体文件的作用是规定某个字符应该用什么形状来显示。
unicode字符集里面,E000 至 F8FF属于用户造字区。原本是空的,用户可以在字体文件里面随便定义这些字符的形状。我们所见的webfont icon,一般就选在这一部分。
(上面这段讲得可能不专业,大致知道是这么一回事就行。)

要使用自定义字符,大致步骤是:

  1. 自己造一个字体文件,把e000所对应的字符形状画上新浪的icon,保存为常用字体文件格式。
  2. 在css中使用font-face引用这个字体文件,任意命名(不和已有的重复,比如叫myfonticon)
  3. 需要显示图标的地方定义font-family为myfonticon,content属性设为"\e000"。

造字可以用Fontographer 5,参考这篇文章webfont应用系列(二)如何制作图标字体?

其实网上已经有一大堆免费好用webfont icon,比如:
IcoMoon App
Ionicons: The premium icon font for Ionic Framework
Fontello - icon fonts generator

时间: 2024-10-12 23:00:39

css content 如何自定义生成图标?的相关文章

CSS content内容生成技术以及应用

一.简介 content属性早在 CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部分的浏览器支持:(Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+).另外,目前Opera 9.5+ 和 Safari 4已经支持所有元素的content属性,而不仅仅是:before和:after伪元素. 在CSS 3 Generated Content工作草案中,content属性添加了更多的

基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作

在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这样给我们扩展使用有很多的不方便.基于这个原因,我想如果能够独立一个模块,自动根据图标生成图标CSS样式文件,并存储相应的记录到数据库里面,方便我们查询显示,那样我们使用起来就很方便了,最后有了这些数据,只需要做一个通用的图标选择界面,并可以在很多地方重用了.本文正是基于这个思路,开发了一个图标管理模

基于MVC+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作

在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界面看起来更加美观和协调.但是在系统中一般内置的图标样式相对比较有限,而且硬编码写到样式表里面,这样给我们扩展使用有很多的不方便.基于这个原因,我想如果能够独立一个模块,自动根据图标生成图标CSS样式文件,并存储相应的记录到数据库里面,方便我们查询显示,那样我们使用起来就很方便了,最后有了这些数据,只需要做一个通用的图标选择界面,并可以在很多地方重用了.本文正是基于这个思路,开发了一个图标管理模

为什么我们放弃css sprite使用iconfont字体图标

说在开头 前面有一篇博客说道,项目中使用压缩和css sprite技术对图标进行分类和组合: 但随着项目的不断完善,我们也遇到了很多问题:   1.如何对图标进行分类:刚开始还比较好,我们对图标进行分类,大概有银行卡图标一类,增删改图标一类,支付类 型一类,等等.但随着,图标的不断增加和业务直接的交叉,发现分类变得很困难,渐渐失去耐心.如果,把所有图标集成到一张图:但是有这样一种情况:有些页面只使用了一个图标,同时用户只在这个页面进行操作:却要下载一整张大图,浪费资源. 2.图标位置不好控制,很

CSS content应用

一.简介 content属性早在 CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容.此特性目前已被大部分的浏览器支持:(Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+).另外,目前Opera 9.5+ 和 Safari 4已经支持所有元素的content属性,而不仅仅是:before和:after伪元素. 在CSS 3 Generated Content工作草案中,content属性添加了更多的

sench touch 自定义小图标(转)

自定义图标的方法 Sencha touch自带图标有限,有时需要自己添加图标.下面介绍自定义图标的方法: 首先需要生成图标字体.有许多网站提供在线生成图标字体的功能,比如IcoMoon,通过这个网站,你可以选择自己需要的图标,然后打包下载下来. 1.进入IcoMoon,看到如下图的页面,点击"Custom Built and Crisp Icon Fonts, Done Right" 2.选择需要的图标,点击下面的"Font>",即生成字体 3.点击"

CSS如何实现自定义链接提示

CSS如何实现自定义链接提示: 在默认状态下可以使用<a>标签的title属性实现链接提示效果.例如: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title

[译]CSS content

原文地址:http://css-tricks.com/css-content/ CSS中有一个属性content,只能和伪元素:before和:after一起使用,他们的写法像伪类选择器(前面有冒号),但是他们并不能选择页面上的任何元素,却可以往页面上添加一些东西,通常这样来写: .email-address:before { content: "Email address: "; } 我们把这段CSS代码放到下面的HTML中: <ul> <li class=&quo

MindManager自定义图例图标方法教程

MindManager自定义图例图标方法教程MindManager中图例主要用于显示导图中的标记.或标记组中的所有命名标记.在导图中添加图例时通常添加为当前选定主题的一个子主题,如果没有选定主题,则作为一个主要主题. 添加图标图例 1)在MindManager 2017中,单击状态栏中的"任务面板"按钮: 2)在显示的列表中,选择"标记",或者你也可以单击"插入">"标记">"组织标记",打开&