用文字代替图标

最新推荐文章于 2024-08-09 06:13:01 发布
最新推荐文章于 2024-08-09 06:13:01 发布
阅读量93 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/sky000/archive/2012/07/16/2593035.html
版权

首先将自己需要用到的图标作成字体文件，我用的软件是High-Logic FontCreator，怎么用，自己google一下吧，然后将字体文件转换一下,因为IE浏览器只能识别.eot格式的字文件，最后就是样式了

 @font-face {
                font-family: 'webiconRegular';
                src: url('webicon-webfont.eot');
                src: url('webicon-webfont.eot?#iefix') format('embedded-opentype'),
                     url('webicon-webfont.woff') format('woff'),
                     url('webicon-webfont.ttf') format('truetype'),
                     url('webicon-webfont.svg#webiconRegular') format('svg');
                font-weight: normal;
                font-style: normal;
            
            }

DEMO

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
        <style>
           @font-face {
                font-family: 'webiconRegular';
                src: url('webicon-webfont.eot');
                src: url('webicon-webfont.eot?#iefix') format('embedded-opentype'),
                     url('webicon-webfont.woff') format('woff'),
                     url('webicon-webfont.ttf') format('truetype'),
                     url('webicon-webfont.svg#webiconRegular') format('svg');
                font-weight: normal;
                font-style: normal;
            
            }
            .test,.test2{letter-spacing:-6px;}
            .icon { font-family: 'webiconRegular';  font-size:24px;display:inline-block;zoom:1;letter-spacing:0px;width:50px;height:50px;background:#40AA53;color:#fff; line-height:55px;text-align:center;margin:0 5px 5px 0;}
            .test2 .icon {background:red;}
        </style>
    </head>
    <body>
        <h1>New Web Project Page</h1>
        <div class="test">
            <span class="icon">a</span>
            <span class="icon">b</span>
            <span class="icon">c</span>
            <span class="icon">d</span>
            <span class="icon">e</span>
            <span class="icon">f</span>
            <span class="icon">g</span>
            <span class="icon">h</span>
            <span class="icon">i</span>
            <span class="icon">j</span>
            <span class="icon">k</span>
            <span class="icon">l</span>
            <span class="icon">m</span>
            <span class="icon">n</span>
            <span class="icon">o</span>
            <span class="icon">p</span>
            <span class="icon">q</span>
            <span class="icon">r</span>
            <span class="icon">s</span>
            <span class="icon">t</span>
            <span class="icon">u</span>
            <span class="icon">v</span>
            <span class="icon">w</span>
            <span class="icon">x</span>
            <span class="icon">y</span>
            <span class="icon">z</span>
            <span class="icon">A</span>
            <span class="icon">B</span>
            <span class="icon">C</span>
            <span class="icon">D</span>
            <span class="icon">E</span>
            <span class="icon">F</span>
            <span class="icon">G</span>
            <span class="icon">H</span>
            <span class="icon">I</span>
            <span class="icon">J</span>
            <span class="icon">K</span>
            <span class="icon">L</span>
            <span class="icon">M</span>
            <span class="icon">N</span>
            <span class="icon">O</span>
            <span class="icon">P</span>
            <span class="icon">Q</span>
            <span class="icon">R</span>
            <span class="icon">S</span>
            <span class="icon">T</span>
            <span class="icon">U</span>
            <span class="icon">V</span>
            <span class="icon">W</span>
            <span class="icon">X</span>
            <span class="icon">Y</span>
            <span class="icon">Z</span>
            <span class="icon">0</span>
            <span class="icon">1</span>
            <span class="icon">2</span>
            <span class="icon">3</span>
            <span class="icon">4</span>
            <span class="icon">5</span>
            <span class="icon">6</span>
            <span class="icon">7</span>
            <span class="icon">8</span>
            <span class="icon">9</span>
        </div>
        <div class="test2">
            <span class="icon">a</span>
            <span class="icon">b</span>
            <span class="icon">c</span>
            <span class="icon">d</span>
            <span class="icon">e</span>
            <span class="icon">f</span>
            <span class="icon">g</span>
            <span class="icon">h</span>
            <span class="icon">i</span>
            <span class="icon">j</span>
            <span class="icon">k</span>
            <span class="icon">l</span>
            <span class="icon">m</span>
            <span class="icon">n</span>
            <span class="icon">o</span>
            <span class="icon">p</span>
            <span class="icon">q</span>
            <span class="icon">r</span>
            <span class="icon">s</span>
            <span class="icon">t</span>
            <span class="icon">u</span>
            <span class="icon">v</span>
            <span class="icon">w</span>
            <span class="icon">x</span>
            <span class="icon">y</span>
            <span class="icon">z</span>
            <span class="icon">A</span>
            <span class="icon">B</span>
            <span class="icon">C</span>
            <span class="icon">D</span>
            <span class="icon">E</span>
            <span class="icon">F</span>
            <span class="icon">G</span>
            <span class="icon">H</span>
            <span class="icon">I</span>
            <span class="icon">J</span>
            <span class="icon">K</span>
            <span class="icon">L</span>
            <span class="icon">M</span>
            <span class="icon">N</span>
            <span class="icon">O</span>
            <span class="icon">P</span>
            <span class="icon">Q</span>
            <span class="icon">R</span>
            <span class="icon">S</span>
            <span class="icon">T</span>
            <span class="icon">U</span>
            <span class="icon">V</span>
            <span class="icon">W</span>
            <span class="icon">X</span>
            <span class="icon">Y</span>
            <span class="icon">Z</span>
            <span class="icon">0</span>
            <span class="icon">1</span>
            <span class="icon">2</span>
            <span class="icon">3</span>
            <span class="icon">4</span>
            <span class="icon">5</span>
            <span class="icon">6</span>
            <span class="icon">7</span>
            <span class="icon">8</span>
            <span class="icon">9</span>
        </div>
    </body>
</html>

上面这些图标都是文字哦，亲！　　

　

转载于:https://www.cnblogs.com/sky000/archive/2012/07/16/2593035.html

weixin_30323631
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一种可以代替图标的字符集Fontawesome
元笙的博客
03-08 1867
一套绝佳的图标字体库 最近，在维护公司某个项目时，因为我是新入职的，刚拿到Android应用源码，有一天leader叫我增加一个页面，我看了就问了一句这些图标我没有，结果leader就是这不是图标，而是字符集运行时渲染出来的，有兴趣来看看...
如何简单方便的用字体代替页面中常见常用的小图标小按钮（上）
ai09855的博客
08-11 216
一、前言 今天要学习的内容：今天主要是稍微总结一下，页面中如何用字体代替图片，省事，省时，方便，实用！ 小苏啰嗦：人都是有惰性的。真的。刚开始我们有一个经验丰富的美工，加上我们关系又非常好，以至于每次我都是等着她把设计图给我，我才开始码html。遇到图片的地方，会切的就自己切了，不会的，就直接让美工切图给我。成了一个不动脑子的码农！现在，美工换人了，新的美工太忙了。加上可能对我们...
修改Element UI自带的小图标，替换成自己的（类似自定义Element UI图标）
闲云野鸟的博客
01-16 1万+
最近使用vue+Element 开发一个pc端的项目，做了一个小操作，感觉蛮有意思的，其实就是二次封装下组件，符合自己的项目 就举个例子吧 这个时间选择组件，我们的项目的话需要把左侧的小图标移到右侧来，而且不能用这个原有的图片，没办法，只能改。如果你之前自定义图标过的话，这个你就很熟悉。 首先找到那个自定义图标class 这个时间组件的图标为.el-icon-date ，然后图标设置在befor...
多种方法实现超长字符用"....."代替
weixin_34223655的博客
11-29 319
1、gridview 效果如图： 公用方法： protected string Intercept(string sInput) { if (sInput != null && sInput != string.Empty) { if (sInput.Length > 10) ...
iconfont，像使用字体一样使用图标
weixin_34249367的博客
01-13 215
在iOS项目中，一般对图片资源要求有@2x，@3x两套，以适配不同分辨率的设备。对于有换肤需求的APP来说，还需要多套图来匹配不同的主题。这样不但无形中增加了开发者和设计者的工作量，而且会增大APP的体积。为了释放开发者、设计者的双手以及给APP“减重”，iconfont被引入到iOS开发中来。 iconfont，从字面上就能理解它就...
使用iconfont.ttf图标文字库代替图标图片
热门推荐
Ralap Zhong的专栏
08-03 2万+
1 效果 2 下载字体库 1) 选中图标 —— 添加入库： 2) 添加至项目： 3) 下载项目中的图标字体库： 4）获取图标字体库iconfont.ttf 5）查看图标对应的unicode值 3 使用 1）把iconfont.ttf拷贝到项目assets目录中 2）修改TextView的字体库 3）xml中使用 4）装逼神器 1 效果 APP肯定都会用到图标，比如...
微信小程序—页面内分享按钮用图标代替
WeiHan_Seven的博客
12-19 3365
微信小程序之页面内分享按钮用图标代替前言代码效果图 前言 张小龙不知道出于什么原因将打开客服会话、触发用户转发、打开授权设置页、打开“意见反馈”页面等功能全都挂载到button上，在页面内实现这些功能只能用button实现，这就很不美观，有时候想用一个图标代替，发现根本无法实现，咋办？好办！ 代码 <button class="btn-special" open-type="share"&g...
在vue项目中使用图标文字
liangtaox8的博客
09-08 2362
字体图标可以从阿里巴巴的矢量图标库里下载: https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4&type=1 比方说我需要一个搜索图标，可以把其先添加到购物车  在项目里可以把添加过去的icon下载下来   下载下来的压缩包解压出来有这么多文件: 其中有用的就这一...
fontAwesome代替网页icon小图标
小记心得
10-15 889
fontAwesome代替网页icon小图标 引言 奥森图标（Font Awesome）提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ，颜色，阴影。 网页小图标到处可见，如果一个网页都是干巴巴的文字和图片，而没有小图标，会显得非常简陋。下面的小图标，你也可能经常会看到的，如图所示： 你可能说——“我们用的都是彩色的，不是黑白的”——别着急，下面会讲到
【ExtJs】表格控件Grid的增删改查，利用renderer让操作列actioncolumn使用文字而不是图标
编程记录，亲测有效
05-03 7680
在《【ExtJs】与后台数据库交互的带分页表格组件grid的查询》（点击打开链接）中介绍了Grid控件是怎么分页显示的。再加上对此控件内的数据的增加、删除、修改，就真的是大功告成了。此控件的排序，应该在后台的数据库查询语句中增加一条order by语句即可，前台的排序在分页之后，仅能对当前页进行排序，没有什么意义。下面举一个例子来说明，如果对ExtJs的表格控件Grid进行增删改查 一、
图标与几何构成
03-02
它以单纯、显著、易识别的物象、图形或文字符号为直观语言，除表示什么，代替什么之外，还具有表达意义、情感和指令行动等作用。视觉传播—静态视觉传播和动态视觉传播文化理念—迅雷LOGO代表着迅雷的特点宗旨，价值...
vs 2012图标
11-26
4. **国际化考虑**：如果你的应用需要支持多语言，可以考虑使用图标来代替文字说明，以减少语言障碍。 总之，"VS 2012图标"集合为C#开发者提供了一套高质量的图形资源，帮助创建具有专业外观的脚本编辑器或其他...
XHTML 简介
lly202406的博客
08-09 416
XHTML作为一种基于XML的标记语言，曾在一段时间内成为网页内容的标准格式。它的严格语法规则和良好的兼容性为网页设计和开发带来了便利。然而，随着HTML5的崛起，XHTML逐渐淡出了人们的视野。尽管如此，XHTML在推动网页技术发展方面所做出的贡献仍然值得我们铭记。
韦东山imx6ullpro完全开发书册
最新发布
08-15
韦东山imx6ullpro完全开发书册
使用html+css +js 实现天猫首页效果.zip
08-15
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无积分，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于收集和整理资料耗费时间的酬劳
Python基于机器学习的电信用户流失预测项目源代码+数据集（高分项目）
08-15
Python基于机器学习的电信用户流失预测项目源代码+数据集（高分项目），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 Python基于机器学习的电信用户流失预测项目源代码+数据集（高分项目），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 Python基于机器学习的电信用户流失预测项目源代码+数据集（高分项目），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。Python基于机器学习的电信用户流失预测项目源代码+数据集（高分项目），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，期末大作业和课程设计高分必看，下载下来，简单部署，就可以使用。 Python基于机器学习的电信用户流失预测项目源代码+数据集（高分项目），含有代码注释，新手也可看懂，个人手打98分项目，导师非常认可的高分项目，期末大作业和课
JavaWeb实现超市订单管理系统smbms.zip
08-15
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助 【资源内容】：项目具体内容可查看/点击本页面下方的*资源详情*，包含完整源码+工程文件+说明（若有）等。【若无积分，此资源可私信获取】 【本人专注IT领域】：有任何使用问题欢迎随时与我联系，我会及时解答，第一时间为您提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【适合场景】：相关项目设计中，皆可应用在项目开发、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面中 可借鉴此优质项目实现复刻，也可基于此项目来扩展开发出更多功能 #注 1. 本资源仅用于开源学习和技术交流。不可商用等，一切后果由使用者承担 2. 部分字体及插图等来自网络，若是侵权请联系删除，本人不对所涉及的版权问题或内容负法律责任。收取的费用仅用于收集和整理资料耗费时间的酬劳
未来社区及其趋势探索（戴德梁行）PDF（52页）.pdf
08-15
未来社区的建设背景和需求分析指出，随着智能经济、大数据、人工智能、物联网、区块链、云计算等技术的发展，社区服务正朝着数字化、智能化转型。社区服务渠道由分散向统一融合转变，服务内容由通用庞杂向个性化、服务导向转变。未来社区将构建数字化生态，实现数据在线、组织在线、服务在线、产品智能和决策智能，赋能企业创新，同时注重人才培养和科研平台建设。 规划设计方面，未来社区将基于居民需求，打造以服务为中心的社区管理模式。通过统一的服务平台和应用，实现服务内容的整合和优化，提供灵活多样的服务方式，如推送式、订阅式、热点式等。社区将构建数据与应用的良性循环，提高服务效率，同时注重生态优美、绿色低碳、社会和谐，以实现幸福民生和产业发展。 建设运营上，未来社区强调科学规划、以人为本，创新引领、重点突破，统筹推进、整体提升。通过实施院落+社团自治工程，转变政府职能，深化社区自治法制化、信息化，解决社区治理中的重点问题。目标是培养有活力的社会组织，提高社区居民参与度和满意度，实现社区治理服务的制度机制创新。 未来社区的数字化解决方案包括信息发布系统、服务系统和管理系统。信息发布系统涵盖公共服务类和社会化服务类信息，提供政策宣传、家政服务、健康医疗咨询等功能。服务系统功能需求包括办事指南、公共服务、社区工作参与互动等，旨在提高社区服务能力。管理系统功能需求则涉及院落管理、社团管理、社工队伍管理等，以实现社区治理的现代化。 最后，未来社区建设注重整合政府、社会组织、企业等多方资源，以提高社区服务的效率和质量。通过建立社区管理服务综合信息平台，提供社区公共服务、社区社会组织管理服务和社区便民服务，实现管理精简、高效、透明，服务快速、便捷。同时，通过培育和发展社区协会、社团等组织，激发社会化组织活力，为居民提供综合性的咨询和服务，促进社区的和谐发展。
图标与文字：设计中的清晰传达
图标的优势在于，它们可以在小屏幕上节省空间，比如在手机或智能手表等设备上，一个简单的图标可以代替冗长的文字描述，提高用户的交互效率。然而，设计的挑战在于，确保图标能够清晰、无歧义地传达信息，否则可能会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值