精华内容
下载资源
问答
  • font icon 使用demo

    2016-02-19 14:59:25
    font icon 使用demo
  • font icon 使用教程

    2016-02-19 14:25:36
    font icon 使用教程, 通过这个简单的demo了解 如何 引用矢量图标
  • FontIcon 是一个简单的库,它在 Android 中使用基于字体的图标。 链接 在 Google Play 上获取演示 利弊 好处 单个.ttf文件而不是大量不同密度(mdpi、hdpi、xhdpi 等)的位图 可缩放矢量图形而不是光栅图像 可以在...
  • FontIconReader FontIcon开源库的查阅功能
  • Font Icon 的资源推荐

    千次阅读 多人点赞 2013-05-12 20:46:03
    关于Font Icon的教程 How to Use Icon Font? @font-face @font-face制作Web Icon  Icon font 实践 如何把你的图标转换成web字体 Font Icon的资源 30 Free Icon Font Sets Absolutely Free Icon Fonts 20 @...
    展开全文
  • iconly-fonticon Iconly程序包中的字体图标 在线
  • cd fonticon npm install # Install pre-commit hooks for automatic code formatting (requires python to be installed). npm run pre-commit 这将安装所有必需的依赖项。 现在,您可以通过运行以下代码来构建...
  • FontIcon示例程序

    2015-08-21 16:35:18
    由于实习的公司还有自己的一个项目都对图标...但是传统的引用Icon操作起来过于麻烦,需要考虑图标过多直接引用的内存过大问题,图标的尺寸和颜色往往也不能够自定义,为此,我们借鉴Web前端的经验,考虑使用字体图标;
  • 欢迎来到GitHub Pages 您可以使用的来维护和预览Markdown文件中网站的内容。 每当您提交到该存储库时,GitHub Pages都会运行从Markdown文件中的内容重建站点中的页面。 降价促销 Markdown是一种轻巧且易于使用的...
  • 在NativeScript + Angular...使用此插件,您可以改为通过特定的类名来引用fonticon : < Label xss=removed xss=removed></ Label> 安装 npm install nativescript-ngx-fonticon --save 用法 在以下示例中将使用 ,但
  • 在html中使用fontIcon 的图标

    万次阅读 2016-02-19 15:03:20
    听说fontIcon 显现 图形比 img要高。 然后它是以矢量图的相似呈现,放大不会失真。 在今天开发中发现,公司有人使用了这项技术。。所以也就花时间学习了一下。。 在学过程中看了几篇文章之后完成的。。这里也推荐下...

    听说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>
    




    难点:

     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


    展开全文
  • Webpack插件可自动切换fonticon源 介绍 将网址设置为您的ali字体图标网址(仅复制粘贴)。 在线版本将用于开发中。 文件将在构建时自动下载并设置。 安装 $ npm install autofonticon - bocloudsp - webpack - ...
  • mint-ui font icon

    万次阅读 2018-03-12 10:33:05
    mint-ui font -icon刚开始学习 mint-ui 的时候,那个心情,后来想着 mint-ui 是不是也提供了 一套font来 供自己使用呢?后来查找mint 文档,诶,没写,那我自己找找看发现 没错,这就是font css 文件里的全部。。...

    mint-ui   font -icon

    刚开始学习 mint-ui 的时候,那个心情,后来想着 mint-ui 是不是也提供了 一套font来 供自己使用呢?

    后来查找mint 文档,诶,没写,那我自己找找看

    发现

     

    没错,这就是font  css 文件里的全部。。。。

    那接下来看看到底提供了哪些字体好了

    < i class = " mint-toast-icon mintui mintui-more " ></ i >
    < i class = " mint-toast-icon mintui mintui-back " ></ i >
    < i class = " mint-toast-icon mintui mintui-search " ></ i >
    < i class = " mint-toast-icon mintui mintui-field-error " ></ i >
    < i class = " mint-toast-icon mintui mintui-field-warning " ></ i >
    < i class = " mint-toast-icon mintui mintui-success " ></ i >
    < i class = " mint-toast-icon mintui mintui-field-success " ></ i >

    对应了这七个



    展开全文
  • FontIcon,即字体图标,是随着CSS3被广泛应用后出现的一个新事物,我们知道之前开发Web应用,字体家族就只能是固定的那些所谓Web安全字体。浏览器支持CSS3之后,就可以通过关键字@font-face支持自定义字体了,这就...

    FontIcon,即字体图标,是随着CSS3被广泛应用后出现的一个新事物,我们知道之前开发Web应用,字体家族就只能是固定的那些所谓Web安全字体。浏览器支持CSS3之后,就可以通过关键字@font-face支持自定义字体了,这就衍生了一个新功能,用字体来代替图片,以往Web里的图片只能是正式的图片,图片一旦设计好,大小和配色就固定了,放大图片很容易失真。字体代替图片后带来的好处很明显:减少图片量,放大缩小图片只要指定字体大小就可以了,不存在失真的问题,指定字体颜色就改变了图片颜色,颜色不再固化。
    下面的示例是企慧科技快速开发平台对字体图标的具体应用,体验地址 http://cloud.kifeee.com:8081
    1. PC端
    这里写图片描述
    这里写图片描述
    2. 手机端
    这里写图片描述

    展开全文
  • Material-UI FontIcon组件使用

    千次阅读 2017-06-02 08:59:26
    其中FontIcon组件包含了900多个系统图标,但是在使用的过程中你会发现图标显示不出来,解决方法如下: 到这个地址https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY
  • 阿里巴巴fonticon字体图标的使用

    千次阅读 2018-08-17 10:54:28
    很早之前就知道阿里巴巴的fonticon矢量图标库,以前是这么使用的:下载某个图标的.png格式,然后引用到项目中,通过img标签或者background来使用。当然我知道该矢量图库可以将图标转换为字体文件来使用,但是一直...
  • 自定义Font Icon

    千次阅读 2013-07-02 14:19:38
    前段时间在《@font-face制作Web Icon》一文收集了三种webfont通过CSS3的@font-face来制作Icon图标。现在在网上最为流行的是@robmadole和@supercodepoet两位大师制作的Font Awesome: 两位大师给大家准备近...
  • 其实FontIcon已经不是什么新技术了,简而言之就是:用字体文件取代图片文件,来展示图标……
  • html添加字体图标font icon

    千次阅读 2016-01-20 21:34:44
    在网站制作中, 有时我们需要用一些按钮或图标来作为网址跳转的点击使用,而...http://fortawesome.github.io/Font-Awesome/ 下载的是个压缩包,把里面的fonts文件夹放到你的网站本地文件的根目录,以及把css里css文
  • 解决font icon图标的对齐问题

    千次阅读 2018-03-31 11:04:26
    采用如下方式可解决首先是外层:text-align: center;display: table;之后里面的i元素:vertical-align: middle;display: table-cell;
  • “#font-icon
  • gulp-font-icon gulp-font-icon是一个gulp插件,可... var fontIcon = require("gulp-font-icon"); gulp.task("fontIcon", function() { return gulp.src(["src/res/icons/*.svg"]) .pipe(fontIcon({ fontName:
  • Fontawesome-iconpicker Font Awesome Icon Picker是一个完全可自定义的Twitter Bootstrap插件,具有基于的强大基础API 您可以使用Font Awesome 5或您选择的其他字体图标集(图标列表是完全可自定义的)。 实例化 ...
  • font-icon-源码

    2021-04-01 11:40:37
    font-icon
  • Icon Font的资源推荐

    2013-05-12 20:46:00
    关于Font Icon的教程 How to Use Icon Font? @font-face @font-face制作Web Icon Icon font 实践 如何把你的图标转换成web字体 Font Icon的资源 30 Free Icon Font Sets Absolutely Free Icon Fonts 20 @...
  • 大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon,我们就可以尝试使用font来实现,本文将详细讲解这种用法

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 94,062
精华内容 37,624
关键字:

fonticon