在html中使用fontIcon 的图标

在html中使用fontIcon 的图标听说fontIcon显现图形比img要高。 然后它是以矢量图的相似呈现,放大不会失真。 在今天开发中发现,公司有人使用了这项技术。。所以也就花时间学习了一下。。在学过程中看了几篇文章之后完成的。。这里也推荐下:1http://www.chinaui.com/Knowledge/20120907/14021209040007.shtml(里面有demo,和更重要的图

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

听说fontIcon 显现 图形比 img要高。  然后它是以矢量图的相似呈现,放大不会失真。  在今天开发中发现,公司有人使用了这项技术。。所以也就花时间学习了一下。。

在学过程中看了几篇文章之后完成的。。这里也推荐下:

1 http://www.chinaui.com/Knowledge/20120907/14021209040007.shtml (里面有demo, 和更重要的 图形转化在线工具:iconmoon)

http://iconfont.cn/ 阿里图形库, 这里提供了很多图形源,可以通过这个地方下载SVG 文件到  iconmoon 进行转化。

http://www.zhangxinxu.com/wordpress/2012/06/free-icon-font-usage-icomoon/(  icommon使用教程)

html引用代码片段

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  
  <!--通过样式引入 font icon 图标-->
  <link rel="stylesheet" href="font/iconfont.css"></link>

  <style type="text/css">
    ul li{
    	cursor: pointer;
    	list-style-type: none;
    	line-height: 30px;
    }
  </style>

  
  <style>
    @font-face {
		font-family: 'icomoon';
		src:    url('fonts/icomoon.eot?b7b2qy');
		src:    url('fonts/icomoon.eot?b7b2qy#iefix') format('embedded-opentype'),
			url('fonts/icomoon.ttf?b7b2qy') format('truetype'),
			url('fonts/icomoon.woff?b7b2qy') format('woff'),
			url('fonts/icomoon.svg?b7b2qy#icomoon') format('svg');
		font-weight: normal;
		font-style: normal;
	}

    
    /*通过样式加 content呈现图标 如:  <i class="iconfont"></i> */
	[class^="icon-"], [class*=" icon-"] {
		/* use !important to prevent issues with browser extensions that change fonts */
		font-family: 'icomoon' !important;
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;

		/* Better Font Rendering =========== */
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	 /*通过样式呈现图标  <i class="icon-im"></i> */
	.icon-im:before {
		content: "\e900";
	}

 
  </style>
 </head>
 <body>
     <ul>
	    

       <li>
	     <!--通过样式加 content呈现图标-->
		 <i class="iconfont"></i>
		</li>

       <li>
	     <!--通过样式呈现图标-->
		 <i class="icon-im"></i> 
	   </li>
	   <li>天猫</li>
       <li>京东</li>
       <li> 3g  </li>
       <li> 4g  </li>
       
       <li>
         <input type="radio" name="t">速率
         <input type="radio" name="t">时延
       </li>
       <li>地图  </li>
     </ul>
 </body>
 
</html>

Jetbrains全家桶1年46,售后保障稳定

难点:

 1 如何 获取SVG 格式的矢量图

  2 如何将SVG 的图标绑定 地址如:\e900  如如何来得?  

  3  转化编辑工具的选择, 网上有很多, 安装文件很大。选择是个麻烦的事情

具体操作步骤:

1  去http://iconfont.cn/  图库 找一个图标,然后以SVG格式 下载下来。

2  通过icommon 教程 了解如何使用它

3 利用icommon 在线工具将你的SVG 转化为需要的格式,最后下载转化完成的包

4 参考里面的demo 引用图标。。

具体实现代码:http://download.csdn.net/detail/tarenahuangdw/9436695

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/200728.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • MyEclipse svn 插件安装

    MyEclipse svn 插件安装1.先下载site-1.10.13-1.9.x  官方版:http://subclipse.tigris.org/files/documents/906/49486/site-1.10.13-1.9.x.zip(点击直接下载)2.打开压缩包后,都有以下一些文件:3.将features文件夹中的文件复制到Myeclipse安装目录中的features文件夹中,将plugins文件夹中的文…

  • mysql数据库去重[通俗易懂]

    mysql数据库去重[通俗易懂]2019独角兽企业重金招聘Python工程师标准>>>…

  • java字符串类型转换为int_java中double转int类型

    java字符串类型转换为int_java中double转int类型标题Java类型转换:int转double由于double的范围比int数据类型大,所以当int值被赋给double时,java会自动将int值转换为double。隐式转换:由于double数据类型的范围和内存大小都比int大,因此从int到double的转换是隐式的。并不需要像doubletoint转换那样进行类型转换;使用Double.valueOf()方法/***Ja…

  • Java中WebService实例

    Java中WebService实例WebServices是由企业发布的完成其特定商务需求的在线应用服务,其他公司或应用软件能够通过Internet来访问并使用这项在线服务。WebService的关键技术和规则:1.XML:描述数据的标准方法.2.SOAP:表示信息交换的协议(简单对象访问协议).3.WSDL:Web服务描述语言.4.UDDI:通用描述、发现与集成,他是一种独立于平台,基于XML语言的用于在互联网上描述商务的协议。一、利用JDKweb服务api实现,这里使用基于SOAPmessage的WebService:1.首先创

  • WEBSERVICE 短信接口调用使用xml进行参数传递

    WEBSERVICE 短信接口调用使用xml进行参数传递

  • java交通信号灯毕业论文范文_信号灯设计论文,关于基于FPGA的交通信号灯控制系统设计相关参考文献资料-免费论文范文…[通俗易懂]

    java交通信号灯毕业论文范文_信号灯设计论文,关于基于FPGA的交通信号灯控制系统设计相关参考文献资料-免费论文范文…[通俗易懂]导读:本文关于信号灯设计论文范文,可以做为相关参考文献。文/胡桂戎陕西警官职业学院陕西西安710021【摘要】本文采用FPGA设计,结合了道路传感器,设计了交通信号灯全感应自适应的控制方案.通过仿真与验证结果表明实现对交通道路的畅通达到优化的效果.【关键词】FPGA;信号灯;系统现代城市交通车流量大,交通信号灯的时间控制和状态转化往往是造成交通效率高低的主要原因.因此,就需要对信号灯…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号