字体图标使用_使用字体图标 - CSDN
精华内容
参与话题
  • icommon 字体图标使用

    2020-02-21 12:50:51
    icomoon字体图标使用 首先去icomoon图标库官网:https://icomoon.io/app/#/select 选择你需要的图标,同时页面会有其他的一些功能,自己可以摸索 选择完成后,会有selection(个数),同时点击 右边的Generate ...

    icomoon字体图标使用

    首先去icomoon图标库官网:https://icomoon.io/app/#/select
    
    选择你需要的图标,同时页面会有其他的一些功能,自己可以摸索
    

    这里写图片描述

    选择完成后,会有selection(个数),同时点击 右边的Generate Font按钮进行下载

    这里写图片描述

    点击Download下载

    把压缩包里面的fonts拷贝到你的项目,需要fonts文件夹,需要css,需要html文件
    

    在这里插入图片描述在这里插入图片描述

    展开全文
  • 字体图标使用

    千次阅读 2018-11-11 11:17:40
    在开发中我们经常会使用各种图标,为了节省资源,你可能不会自己设计自己需要的图标,这时候你可已通过http://www.iconfont.cn/这个网站来获取自己需要的图标,在开发过程中,我们会使用在线图标链接,易于增加所需...

    在开发中我们经常会使用各种图标,为了节省资源,你可能不会自己设计自己需要的图标,这时候你可已通过http://www.iconfont.cn/这个网站来获取自己需要的图标,在开发过程中,我们会使用在线图标链接,易于增加所需图标或者删除多余的图标

    或者你可以直接下载代码

    下载的代码包含Unicode,Font class ,Symbol,三种引用方式的示例,我们使用Font class,需要用到iconfont.css、iconfont.eot、iconfont.ttf、iconfont.svg、iconfont.woff 这几个文件,我们需要关注的是iconfont.css这个文件,我们先看看代码讲解:

    
    @font-face {
      /* 1.首先指定字体的系列,我们指定为字体图标 */
      font-family: "iconfont";
      /* 2.接下来的代码指定了字体图标的路径,兼容了各种移动端浏览器和PC端浏览器,你可以根据自己的需要,删除不必要的兼容 */
      src: url('iconfont.eot?t=1541904002925'); /* IE9*/
      src: url('iconfont.eot?t=1541904002925#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
      url('iconfont.ttf?t=1541904002925') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
      url('iconfont.svg?t=1541904002925#iconfont') format('svg'); /* iOS 4.1- */
    }
    /* 3.这里设置字体图标的默认样式,你可以更改默认样式 */
    .iconfont {
      font-family:"iconfont" !important;
      font-size:16px;
      font-style:normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    /* 4.下面的代码就是我们的字体图标使用时引入的代码,通过伪元素 :before 引入的 */
    .icon-guangpan:before { content: "\e604"; }
    
    .icon-zanting:before { content: "\e64b"; }
    
    /* 更多的.icon-字体名:before{} */

    使用的时候

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>测试字体图标的使用</title>
    	<!-- 1.引入字体图标样式 -->
    	<!-- (1)开发时使用线上的链接 -->
    	<!-- <link rel="stylesheet" href="https://at.alicdn.com/t/font_711552_g7496d85m44.css"> -->
    	<!-- (2)上线的时候我们可以把线上的字体图标下载到本地或者是放置在服务器中 -->
    	<!-- <link rel="stylesheet" href="iconfont.css"> -->
    	<!-- (3)或者直接下载需要的文件样式 -->
    	<style type="text/css">
    		@font-face {
    		  /* 1.首先指定字体的系列,我们指定为字体图标 */
    		  font-family: "iconfont";
    		  /* 2.接下来的代码指定了字体图标的路径,兼容了各种移动端浏览器和PC端浏览器,你可以根据自己的需要,删除不必要的兼容 */
    		  src: url('iconfont.eot?t=1541904002925'); /* IE9*/
    		  src: url('iconfont.eot?t=1541904002925#iefix') format('embedded-opentype'), /* IE6-IE8 */
    		  url('iconfont.ttf?t=1541904002925') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    		  url('iconfont.svg?t=1541904002925#iconfont') format('svg'); /* iOS 4.1- */
    		}
    		/* 3.这里设置字体图标的默认样式,你可以更改默认样式 */
    		.iconfont {
    		  font-family:"iconfont" !important;
    		  font-size:16px;
    		  font-style:normal;
    		  -webkit-font-smoothing: antialiased;
    		  -moz-osx-font-smoothing: grayscale;
    		}
    		/* 4.下面的代码就是我们的字体图标使用时引入的代码,通过伪元素 :before 引入的 */
    		.icon-guangpan:before { content: "\e604"; }
    	
    		.icon-zanting:before { content: "\e64b"; }
    		.myfontcss{
    			font-weight:900;font-size:30px;
    		}
    	</style>
    </head>
    <body>
    	<!-- 3.使用时,需要引入2个class类,iconfont是必须引入的,另外一个是指定字体图标的名称 -->
    	<!-- 另外我们可以给每个字体图标另外的样式 -->
    	<span class='myfontcss iconfont icon-guangpan'></span>
    	<span class='iconfont icon-guangpan'></span>
    </body>
    </html>

    当然在微信小程序中使用字体图标又是另外一种情况

    你在开发的过程中没办法直接使用

    @import "https://at.alicdn.com/t/font_711552_g7496d85m44.css";
    

    因为小程序不认识css文件,他们只识别wxss,我们需要换成另外一种方式,打开你的项目代码页面,切换到Unicode,你可以看到@font-face是使用的是线上的字体文件,所以我们可以使用该段代码代替Font class方式的@font-face,这样就实现开发中字体增删,而不需要重新下载字体文件,只需要更新字体文件路径即可。

     

    展开全文
  • 阿里字体图标(iconfont)使用

    千次阅读 2018-08-22 21:35:26
    4.进入图标库---官方图标库,将项目中所需的图标一起添加入库(购物车),最后添加至所建的项目(如:travel项目) 5.进入我的项目,点击下载至本地 6.下载完成时,在下载的压缩包解压,里面的.js文件和.html文件...

    1.进入阿里矢量图标库(www.iconfont.com)

    2.登录,登录后进入图标管理----我的项目

    3.新建项目,输入项目名,项目描述

    4.进入图标库---官方图标库,将项目中所需的图标一起添加入库(购物车),最后添加至所建的项目(如:travel项目)

    5.进入我的项目,点击下载至本地

    6.下载完成时,在下载的压缩包解压,里面的.js文件和.html文件可丢弃,只需要iconfont.css文件和字体文件(如下图。红色圈住的文件可丢弃)

    7.在项目文件夹src目录下新建assets文件夹,再文件夹assets目录下新建文件夹iconfont,将iconfont.css文件放在assets文件夹目录下,文字文件放在iconfont文件夹里(如下图)

     

    8.修改iconfont.css里面的路径(如图)

    9.在项目中引入iconfont.css文件,并使用,&#xe627这个是去阿里图标我的项目中移到自己需要的图标,然后点击复制代码(如图);

     

     

    展开全文
  • 小程序使用字体图标

    千次阅读 2018-07-09 09:59:15
    项目中常常需要使用字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。第一步:下载需要的字体图标进入阿里图标官网...

    项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。

    第一步:下载需要的字体图标

    进入阿里图标官网http://iconfont.cn/搜索自己想要的图标,如这里需要一个购物车的图标,流程为:

    搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮。

    点击下载代码,将得到名为download.zip的压缩包,解压将看到以下内容:


    第二步:转换ttf文件

    进入https://transfonter.org/平台,将解压出来的ttf字体文件转化成base64格式。流程如下:



    点击下载,得到转换后的压缩包,名为transfonter.org-开头。解压可以得到如下图的几个文件:


    第三步:在微信小程序中使用

    新建微信小程序,将默认生成的代码删除。

    1--在index.css文件中添加样式内容。打开刚刚我们经过转换的解压出来的文件,找到stylesheet.css,将其中的内容全部复制到index.css文件中。注意是转换过的那个文件。


    2--打开没有转换过的download.zip解压出来的文件,找到iconfont.css文件,将这个文件中的没有打岔的内容复制到index.css文件中。@font-face这部分不要,只要下边的这部分。


    3--在index.wxml中使用字体图标。代码如下:


    效果如下:


    展开全文
  • CSS web字体图标使用

    2020-01-20 10:44:30
    web字体 1、字体格式 不同浏览器所支持的字体格式是不一样的,我们有必要了解一下有关字体格式的知识。 1、TureType(.ttf)格式 .ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有IE...
  • 字体图标使用-修改颜色

    万次阅读 2018-06-11 11:35:31
    今天在画一个页面的时候,用一个要用到图标的地方,产品要求使用字体图标,并联系UI提供了字体图标库给我,字体图标库结构如下:使用方法如下:1、在jsp中引入iconfont.css &lt;link rel="stylesheet"...
  • iconfont字体图标使用

    千次阅读 2017-09-20 16:16:46
     2、登录以后,可以搜索自己需要的资源,然后直接下载使用,或者建立图标库然后再使用,例如这里以删除的图标为例  a) 搜索删除图标    b) 选择需要的图标,然后可以执行三种操作:添加入库、收藏
  • 字体图标的用法 创建字体文件 新添加字体图标 字体图标的用法 这里推荐2个工具网站, 一个是阿里妈妈字体图标, 一个是icomoon 创建字体文件 在阿里妈妈网站上找到要下载的字体图标,然后下载svg格式 ...
  • 在uni-app中使用字体图标

    万次阅读 2020-09-25 17:03:04
    首先去iconfont下载字体文件,就是下面这6个 在main.js中引入样式 在页面中直接通过样式类名使用 大功告成
  • 问题:在项目开发时使用字体图标,发现两个问题;1、出现报错:解决方法为:把字体引入方式改为绝对路径2、不报错,但是不显示图标字体,出现方框原因可能有两种:①没在用到的地方引入字体的样式文件②你使用的是...
  • 最近项目大量用到字体图标,大家也知道,字体图标任意缩放不会失真,也大大减少请求数量,非常好用。以下将讲解本人如何根据美工提供的.svg文件生成字体图标并应用。 借助一个在线生成工具:...
  • 微信小程序中使用阿里字体图标

    万次阅读 2020-02-28 14:27:08
    在微信小程序中使用阿里字体图标 ,不通过转换成base64的方式实现。 为了美化微信小程序,可以适当的使用一些小图标,这样体验也更友好些,于是决定使用常用的字体图标。下载图标首先在阿里字体图标查找你所需要的...
  • 小白如何在html css里使用字体图标~

    万次阅读 2017-03-01 14:45:01
    字体图标经常使用的是 阿里图标库的:http://www.iconfont.cn/ icomoon图标库的:https://icomoon.io/ 下面就介绍一下icomoon库的字体图标使用方法~~~=。=~~~
  • 阿里巴巴iconfont字体图标使用方法

    万次阅读 2018-06-29 15:57:13
    iconfont字体图标使用方法--超简单!这里讲解的默认是元素使用类名;step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过;step 2:找到图标管理-&gt;我的项目-&gt...
  • 如何在 HTML中使用图标字体

    千次阅读 2018-05-06 16:05:19
    1. 推荐首先推荐一个下载图标字体的网址:https://icomoon.io/app/#/select 还有一个阿里巴巴矢量图标库:http://www.iconfont.cn/ (操作稍微复杂一点)本文主要讲如何在HTML中使用图标字体,如果需要了解两个...
  • Bootstrap所使用的是字体图标Glyphicons,这个字体包含200个图标。使用字体图标时需要注意几点: 1、每个图标字体都是有一个基类和相对应的图标类组成,如: 2、字体图标不能与其他元素共同存在,只能单独...
  • svg图标转Iconfont字体图标

    万次阅读 2017-05-05 09:48:06
    最近在实际开发项目中用到了SVG格式的图片,在web中用着挺麻烦的,所以想到了把svg转换成字体图标。 找到一个比较好用的svg转iconfont的网站,而且免费 附图  选中图标然后点击Generate Font然后下载就可以...
  • 三个Bootstrap免费字体图标

    万次阅读 2019-03-12 20:07:51
    前言:Bootstrap 简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单 ,深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好、更快, 组件无数可复用的组件,包括字体图标,在网页...
  • 你在使用bootstrap字体图标的时候,是否遇到引用本地Bootstrap文件无法显示字体图标,而使用CDN服务器上bootstrap却能正常显示的问题。 在不能正常显示的时候,比如我要在一个按钮中使用一个√的字体图标,我的代码...
  • 生成iconfont(地址) 把你想要的图标添加到购物车。...2. 红色的是字体文件 如图: 小程序应用 复制iconfont.css 文件样式到fonts.wxss中如下示例 /*fonts.wxss*/ @font-face {font-famil...
1 2 3 4 5 ... 20
收藏数 87,947
精华内容 35,178
关键字:

字体图标使用