专栏首页web编程技术分享ICONFONT字体图标库使用

ICONFONT字体图标库使用

Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。

本文我们就来一起学习一下iconfont字体图标库的使用吧。

效果图:

首先,搜索一下iconfont:

选择第一个链接,点进去:

登录进去,我这边用的是自己的github账号。登录成功后,选择我的项目,去新建一个项目:

项目新建好了以后,内部还没有任何图标,接下来,我们可以类似淘宝购物一样去获取想要的图标。

看到你喜欢的图标,选择添加入库!

也可以直接在搜索栏进行图标的搜索!

挑选完毕之后,我们还需要把库里的图标添加至项目:

复制一下代码,接着在对应的页面中引入:

<link type="text/css" rel="styleSheet"  href="http://at.alicdn.com/t/font_578430_rar6t76yrc545cdi.css" />

图标引用:

<i style="font-size:50px;" class='iconfont icon-changpianCD'></i>

如果是多色图标,就引入js文件,图标格式为:

<svg aria-hidden="true">
  <use xlink:href="#icon-squirtle"></use>
</svg>

源码下载地址: PC: http://java520.top/article/3474.html 手机:http://java520.top/article/3474.html?app=1

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【H5 音乐播放实例】第三节 音乐详情页制作(3)

    剽悍一小兔
  • Java 实现批量重命名,亲测可用(精简版)

    剽悍一小兔
  • 基于SpringBoot打造在线教育系统(3)-- 登录与授权管理

    首先抱歉了各位,上一讲有一个错误,我已经在视频里面指出。 视频地址:https://www.bilibili.com/video/BV1CA411W7QV/ ...

    剽悍一小兔
  • Unity3d 修改编辑界面控制图标大小 修改相机图标显示大小

    在 Unity3d 会显示一些控制图标,如相机图标和光照图标。而在编辑界面我发现这些图标太大了,影响我编辑,可以通过界面控制修改图标显示大小

    林德熙
  • [静Design译文] UI界面图标终极设计指南

    UI界面的图标通常可以近似的看做以下的基本格式之一:横向矩形,纵向矩形,对角矩形,圆形,三角形,正方形。 如果把它们做成高斯模糊效果,你就会发现它们具有相同的视...

    用户5009027
  • ICON设计使用手册:如何设计一个优秀的图标?

    大家都知道UI设计师要画图标,面对那么多纷繁复杂的林林总总的图标,大家有没有总结过一些系统的知识点呢,今天咱们来看看Nick Babich的这篇文章。

    用户5009027
  • 高质量又免费的图标资源都在这

    在我们去开发一款 App 的时候,图标一定用得到,去上哪儿找高质量又免费的图标资源呢?说真的接下来推荐的这几个网站上的图标质量非常高,你可以找到很多灵感与启发,...

    崔庆才
  • web开发中插入FontAwesome 图标字体库

    Font Awesome是一套绝佳的图标字体库和CSS框架,它是可缩放的矢量图标,用户可以可以对图标的特性进行更改,比如大小、颜色、阴影等并且可以组合不同的图标...

    AlexTao
  • 信号图标

    类视图**和对象浏览器显示表示代码实体的图标,例如命名空间、类、函数和变量。下表演示并描述了这些图标。

    vv彭
  • [精品译文] 如何为移动应用设计出色的图标

    APP产品营销的其中很重要一环 ,就是图标设计。它的重要性很明显,即图标将影响用户的第一印象,这是吸引用户注意力的一种重要方式。特别是一些需要基于应用程序进行创...

    用户5009027

扫码关注云+社区

领取腾讯云代金券