icon 图标_icon图标 - CSDN
精华内容
参与话题
  • 微信小程序->如何使用icon图标

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

    微信小程序使用字体图标

    2017年07月03日 19:29:09

    阅读数:24209

    项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的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中使用字体图标。代码如下:

     

    
     
    1. <!--index.wxml-->

    2. <view class="container">

    3. 个人中心

    4. <text class="iconfont icon-wode" style="font-size:50px;color:red"></text>

    5. </view>

    效果如下:

     

     

    字体图标跟字体一样,可以通过font-size来改变大小,通过指定color来改变他的颜色。

     

    总结:到这里微信小程序的字体图标的使用就完成了,这里经过转换成64位编码之后,直接将样式放在css文件中即可,并不需要引入其他以外的文件,相当简洁。

     

     

    附上css全部代码:

     

    
     
    1. /* This stylesheet generated by Transfonter (https://transfonter.org) on July 3, 2017 11:03 AM */

    2.  
    3. @font-face {

    4. font-family: 'iconfont';

    5. src: url(data:font/truetype;charset=utf-8;base64,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IyA8IC4jOLEkARQrLbA6LLEJBCVCsAAWsAQlsAQlIC5HI0cjYSCwBCNCsAZFKyCwYFBYILBAUVizAiADIBuzAiYDGllCQiMgR7AEQ7CAYmAgsAArIIqKYSCwAkNgZCOwA0NhZFBYsAJDYRuwA0NgWbADJbCAYmGwAiVGYTgjIDwjOBshICBGI0ewACsjYTghWbEkARQrLbA7LLAuKy6xJAEUKy2wPCywLyshIyAgPLAEI0IjOLEkARQrsARDLrAkKy2wPSywABUgR7AAI0KyAAEBFRQTLrAqKi2wPiywABUgR7AAI0KyAAEBFRQTLrAqKi2wPyyxAAEUE7ArKi2wQCywLSotsEEssAAWRSMgLiBGiiNhOLEkARQrLbBCLLAJI0KwQSstsEMssgAAOistsEQssgABOistsEUssgEAOistsEYssgEBOistsEcssgAAOystsEgssgABOystsEkssgEAOystsEossgEBOystsEsssgAANystsEwssgABNystsE0ssgEANystsE4ssgEBNystsE8ssgAAOSstsFAssgABOSstsFEssgEAOSstsFIssgEBOSstsFMssgAAPCstsFQssgABPCstsFUssgEAPCstsFYssgEBPCstsFcssgAAOCstsFgssgABOCstsFkssgEAOCstsFossgEBOCstsFsssDArLrEkARQrLbBcLLAwK7A0Ky2wXSywMCuwNSstsF4ssAAWsDArsDYrLbBfLLAxKy6xJAEUKy2wYCywMSuwNCstsGEssDErsDUrLbBiLLAxK7A2Ky2wYyywMisusSQBFCstsGQssDIrsDQrLbBlLLAyK7A1Ky2wZiywMiuwNistsGcssDMrLrEkARQrLbBoLLAzK7A0Ky2waSywMyuwNSstsGossDMrsDYrLbBrLCuwCGWwAyRQeLABFTAtAABLuADIUlixAQGOWbkIAAgAYyCwASNEILADI3CwDkUgIEu4AA5RS7AGU1pYsDQbsChZYGYgilVYsAIlYbABRWMjYrACI0SzCgkFBCuzCgsFBCuzDg8FBCtZsgQoCUVSRLMKDQYEK7EGAUSxJAGIUViwQIhYsQYDRLEmAYhRWLgEAIhYsQYBRFlZWVm4Af+FsASNsQUARAAAAAAAAAAAAAAAAAAAAAAAAAAAMgAyAxj/4QNS/ywDGP/hA1L/LAAAAAAAAAAA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) format('truetype');

    6. font-weight: 500;

    7. font-style: normal;

    8. }

    9.  
    10. .iconfont {

    11. font-family:"iconfont" !important;

    12. font-size:16px;

    13. font-style:normal;

    14. -webkit-font-smoothing: antialiased;

    15. -moz-osx-font-smoothing: grayscale;

    16. }

    17.  
    18. .icon-search:before { content: "\e611"; }

    19.  
    20. .icon-youjiantou:before { content: "\e603"; }

    21.  
    22. .icon-daifukuan:before { content: "\e684"; }

    23.  
    24. .icon-daishouhuo:before { content: "\e642"; }

    25.  
    26. .icon-wode:before { content: "\e606"; }

    27.  
    28. .icon-icon:before { content: "\e64b"; }

    29.  
    30. .icon-diliweizhishezhi:before { content: "\e616"; }

    31.  
    32. .icon-daifahuo:before { content: "\e678"; }

    33.  
    34. .icon-daipingjia:before { content: "\e619"; }

    35.  
    36. .icon-shouye:before { content: "\e69d"; }

    转载地址:https://blog.csdn.net/nongweiyilady/article/details/74244362

    展开全文
  • icon 图标 icon 图标 icon 图标

    热门讨论 2020-07-30 23:32:53
    icon 图标 icon 图标 iconicon 图标 icon 图标 iconicon 图标 icon 图标 iconicon 图标 icon 图标 iconicon 图标 icon 图标 iconicon 图标 icon 图标 iconicon 图标 icon 图标 iconicon 图标 icon 图标 icon
  • 1.除了Icon以外,还有很多不错的UI设计素材。 地址:http://worldui.com/ 2.除了免费Icon资源下载以外,还提供Icon定制的付费服务。 地址:http://dryicons.com/ 3.很喜欢这个icon资源站的展示方式。 地址:...

    1.除了Icon以外,还有很多不错的UI设计素材。

    地址:http://worldui.com/

    2.除了免费Icon资源下载以外,还提供Icon定制的付费服务。

    地址:http://dryicons.com/

    3.很喜欢这个icon资源站的展示方式。

    地址:http://www.icotrip.com/

    4.Icones.pro,icon资源站,每日推荐的Icon资源还不错,可以按照浏览数,下载数等查看Icon资源。

    地址:http://icones.pro/

    5.IconPNG 共收录 21372 个 图标icons 和 416 个 icon 图标系列。

    地址:http://www.iconpng.com/

    6.FindIcons.com就是一个帮您找免费图标的图标搜索引擎。有3000多套图片集和30多万个免费Icon资源。

    地址:http://findicons.com/

    7.IconFinder是我个人最喜欢的一个Icon资源站,拥有152,466 icons以及775 icon集,强烈推荐!

    地址:http://www.iconfinder.com/

    8.EasyIcon:拥有超过40万个Icon资源,完全收录Open Icon Library 11,489个图标。

    地址:http://www.easyicon.cn/

     9.Incoarchive对于Icon的分类做得较

    好,目前约有253,428 icons以及 1,348Icon集。

    地址:http://www.iconarchive.com/

    10.SoftIcons也是我很喜欢的一个Icon站,其最大的优点在于用户下载Icon集:)

    地址:http://www.softicons.com/

    11.Icon资源搜索引擎,资源还比较丰富。

    地址:http://www.iconlet.com/

    12.一个设计感不错的Icon资源站点

    地址:http://icon.io/

    展开全文
  • icon图标

    千次阅读 2017-08-17 11:13:46
    什么是图标字体? 图标字体不同于标准的字体数字的字符,是一种包含符号和字形(如箭头、文件夹、放大镜)的字体文件。 例如: 图标字体的使用就像和使用网页字体一样,个人理解就是把一些图标以字体的形式...

    简介

    什么是图标字体?

    图标字体不同于标准的字体数字的字符,是一种包含符号和字形(如箭头、文件夹、放大镜)的字体文件。

    例如:


    图标字体的使用就像和使用网页字体一样,个人理解就是把一些图标以字体的形式保存在一个字体文件里面,然后再以调用字体的方式来使用。具体使用方法详情可以去看看css中的@font-face的用法,在这里就不详细解释了。


    免费图标字体可以完美的运用在你的界面设计中,可以让你更快捷的设计出更精彩的界面。


    很多UI框架都提供了 图标的直接 引用

    比如bootstrap。



    使用方法

    图标字体目前基本上有两种方式。

    一种是引用框架js或者字体库,然后让class= 我们需要的样式名

    例如:@import url(http://weloveiconfonts.com/api/?family=zocial);/* zocial */[class*="zocial-"]:before {font-family: 'zocial', sans-serif;}

    <ul> 

    <li class="zocial-twitter"></li>

    <li class="zocial-flickr"></li> 

    <li class="zocial-lastfm"></li> 

    <li class="zocial-reddit"></li>

    </ul>


    第二种是选中我们需要的图标生成我们自己的字体库,然后下载到本地,引用后,直接使用编号

    ps:有一些网站只能下载到svg格式的文件,这些文件的使用方法也是第二种,需要到另外的网站上上传制作 字体库。

    http://fontello.com/ 就能制作

    选中完后会生成编码,要记住哪些编码对应哪些图标





    在css中引用

    	/*Entypo font*/
    @font-face {
        font-family: 'FontomasEmtypo';
        src: url('entypo/fontomas-webfont.eot');
        src: url('entypo/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
             url('entypo/fontomas-webfont.woff') format('woff'),
             url('entypo/fontomas-webfont.ttf') format('truetype'),
             url('entypo/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
        font-weight: normal;
        font-style: normal;
    }


    html中引用:

    <div class="box">
      <span class="key">!</span>
      <span class="fontomas"> ! </span>
      <span class="hex"> ! </span>
      <span class="cssContent">content:'!'</span>
    </div>




    图标库收集

    下面就列举可以制作或者可以下载svg文件的网站:


    bootstrap

    http://v3.bootcss.com/components/




    WE LOVE ICON FONTS

    链接:

    http://weloveiconfonts.com/




    Fontello

    链接:



    ICOMATIC

    链接:






    ICONIC OPEN

    链接:



    ICONIC PRO

    链接:




    Genericon

    链接:





    Foundation Icons Fonts

    链接:



    Sosa icon font

    链接:




    Font Awesome

    链接:

    fa 类型的icon



    Raphaël Icon-Set

    链接:






    IcoMoon

    链接:





    Typicons


    链接:





    Entypo

    链接:






    Heydings Icons

    链接:




    JustVector Social Icons Font

    链接:





    Modern Pictograms

    链接:




    Signify Lite

    链接:




    Web Symbols typeface

    链接:




    Social Media Icons

    链接:



     ikoo

    链接:








    展开全文
  • 使用Icon图标的几种方式

    千次阅读 2020-04-26 13:42:15
    一.CSS Sprite 这也就是我们平时所说的雪碧图(也叫精灵图),主要通过background-position属性来控制图片显示的位置,不过要注意的是图片是以左上角为坐标原点,坐标的变动应在第四象限内,及x的...选择icon后添...

    一.CSS Sprite

    这也就是我们平时所说的雪碧图(也叫精灵图),主要通过background-position属性来控制图片显示的位置,不过要注意的是图片是以左上角为坐标原点,坐标的变动应在第四象限内,及x的取值为0到正无穷,y的取值为负无穷到0.

    二.使用font icon

    首先我们要下载font字体文件,推荐网站:https://www.iconfont.cn/

    选择icon后添加购物车,下载代码(建议创建一个项目,将图标加入到项目中,这样方便后续维护),我们会得到以下几个文件,其中标红的为必须文件,一个为css样式文件,其余四个为字体文件。(除了这5个文件,其它文件可以删除)

     

    demo_index.html页面显示了如何使用字体图标:

     

    使用方式:

    方式一:font+html

    <span class="iconfont iconriqi">&#x33;</span>

    方式二:font+css

    <span class="iconfont iconriqi"></span>

     

    展开全文
  • WEUI icon.css 中的图标

    万次阅读 2018-11-17 17:32:25
    icon-1 icon-2 icon-3 icon-4 icon-5 icon-6 icon-7 icon-8 icon-9 icon-10 icon-11 icon-12 icon-13 icon-14 ...
  • 图标库是iconfont,这里面的图标够用了吧 一.新建项目 二.选择喜欢的图标,加入购物车,再添加到项目 三.生成代码 四.将链接粘贴到地址栏,将css内容复制到icon.css 五.在App.vue进行全局引用 六.在相应组件使用...
  • element-ui的图标设置大小

    万次阅读 多人点赞 2019-06-13 14:36:03
    scss样式:只需要给父盒子设置字体大小 组件样式:
  • SpringBoot-----更换项目图标icon

    万次阅读 2018-10-29 11:51:00
    1、方式一:直接把icon图标拷贝到resources/static目录下 2、方式二:如果放在static/images/xx.icon 则在页面直接引用图标 &lt;link rel="icon" type="image/x-icon" href="/...
  • Element-Ui组件(二)Icon 图标

    万次阅读 2019-06-03 17:08:00
    Element-Ui组件(二)图标应用 本文参考Element官方文档: http://element-cn.eleme.io/#/zh-CN/component 基本用法 Element内置丰富的图标库,主要有以下2种用法: 设置类名el-icon-xxx,通常使用i元素 在...
  • 微信小程序----icon组件

    万次阅读 2019-03-19 17:18:31
    原生的icon组件的属性 WXML view class=&amp;quot;icon-group&amp;quot;&amp;gt; icon wx:for=&amp;quot;{{typeList}}&amp;quot; type=&amp;quot;{{item}}&amp;...
  • bootstrap所使用的图标

    万次阅读 2018-03-08 14:18:32
    bootstrap所使用的图标集:
  • iview中icon不能显示的问题

    万次阅读 2018-10-26 15:25:20
    当代码中引入自定义的icon时,iview中原来的icon就不能显示出来了 这是因为引入了自定义的icon,使得icon的格式发生了变化 在iview的icon前面加上ivu-icon-,完美解决 ...
  • icon 图标。 属性名 类型 默认值 说明 type String   icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear size Number / String ...
  • icon是一种图标格式,用于系统图标、软件图标等,这种图标扩展名为*.icon、*.ico。常见的软件或windows桌面上的那些图标一般都是ICON格式的。icon元素包括两个可选的子元素:small-icon子元素和large-icon子元素。...
  • 全世界最著名的 icon 网站都在这了

    万次阅读 2017-04-10 09:50:32
    作为一个多年的独立开发者,收藏了非常多免费无版权图片网站、免费 icons、知名的技术人博客、有趣的网站等等,今天给大家分享我这几年收藏的 icon 网站,觉得好呢,点个赞关注个专栏,有补充呢給我留个言,感谢大家...
  • VUE设置浏览器icon图标

    万次阅读 2018-06-10 23:04:17
    Vue怎么设置左上角icon图标呢?步骤如下:(1)、提前把icon图标copy到static目录下(2)、在index.html页面添加 &lt;link rel ="shortcut icon" type="image/x-icon" href="static/...
  • easyUI默认图标的使用

    万次阅读 2018-04-12 17:29:26
    使用格式如下:&lt;table id="...图标" iconCls="icon-save"&gt;也可以用于其他地方,这是最简单的使用方式。iconCls="icon-add" iconCls="icon-edit"
  • 解决网页ICON图标无法显示的问题

    万次阅读 2012-03-31 12:23:42
    type="image/x-icon" />”这段代码是否有书写错误 还有另外3种写法,可以根据...第二步:检查下上传的ICON图标(一般是favicon.ico)是否存在问题 一般ICON的大小是16*16,大小1-2k,建议不宜过大!虽然IC
  • 系统(HTML页面)设置icon图标

    千次阅读 2018-12-19 10:40:50
    从系统安全及使用便捷等角度出发,设置系统页面的icon图标是基本常识,设置方法如下,备用。 &lt;link rel="icon" href="./images/favicon.ico" type="image/x-icon" /&gt;...
1 2 3 4 5 ... 20
收藏数 167,007
精华内容 66,802
关键字:

icon 图标