字体图标的用法

  第一次听说字体图标--iconfont,感觉是:哇,好高大上的样子,会不会很难啊。然而当真正去用的时候,才发现,网上的字体图标库为我们做了太多工作,我们只需要傻瓜式的挑选自己需要的图标,傻瓜式的复制粘贴就可以将各种的小图标以字体的方式加入到我们的页面中了。

  本文为大家讲述的是如何使用阿里巴巴字体图标库:

  第一步:在百度或其他搜索引擎中搜索“iconfont”,如果是百度的话,应该第一条搜索结果就是“Iconfont-阿里巴巴矢量图标库”。

  第二步:点击进入“Iconfont-阿里巴巴矢量图标库”。网站中央有一个搜索框,想要使用什么图标,直接输入拼音、中文词或英文单词即可(建议使用前先进行注册或第三方登陆)

  第三步:假设输入了“shezhi”,这时,页面中出现了很多的“设置”小图标,当鼠标移入想要使用的图标时,图标上会出现一个黑色透明的遮罩,遮罩中有三个选项(加入购物车、收藏、下载)。

  第四步:点击加入购物车,然后在搜索中继续输入想要使用的下一个图标,然后选择想要的图标加入购物车,当所需图标全部选好并加入购物车后,点击页面中的购物车图标(这个图标上有一个数字,表示用户添加了几个图标)。

  第五步:点击购物车图标后,会在页面右侧出现一个侧边栏,点击其中的添加至项目,这时,会看到一个“加入项目”的字样,可以加入之前写好的项目,也可以点击旁边的加号,重新新建一个项目,并填入新项目的名字。

  第六步:添加至项目后,页面跳转到“我的项目”,这里,我们说一种简单的用法,直接点击“下载至本地”,然后把下载好的文件解压,放入到我们正在完成的项目中,页面中引入下载好的“iconfont.css”。

  第七步:哪个地方想要添加图标,只需要加上一个空标签,空标签上写入两个类名即可,两个类名是“iconfont”和图标名字对应的那个类名。

  完成上述七个步骤,则可以向页面中加入字体图标。

  PS:本文只是单纯的讲述如何引入阿里巴巴字体图标,若由于使用阿里巴巴字体库引发纠纷与本文无关。

时间: 2024-07-31 15:27:33

字体图标的用法的相关文章

Font Awesome字体图标的 用法, 很简单

http://fontawesome.dashgame.com/ 上面是 官网,  可下载,也可以CDN. 1...  加载 2...  用法 原文地址:https://www.cnblogs.com/andy-lehhaxm/p/10608636.html

[Phonegap+Sencha Touch] 移动开发43 WebApp字体图标的制作

Sencha touch从2.2开始,里面用到的图标全部是字体图标(icon font),也就是字体文件里面的字符作为图标来用. 主要特性 字体是矢量的,使用icon font来生成图标相对于基于图片的图标来说,有如下的好处: 自由的变化大小而不失真,适用于不同分辨率和尺寸的屏幕 自由的修改颜色 添加阴影效果 支持图片图标的其它属性,例如,透明度和旋转等等 可以添加text-stroke和background-clip:text等属性,只要浏览器支持 字体图标的用法 我们来看下sencha to

字体图标库使用方法

一些字体图标库的网站 https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/ http://www.bootcss.com/p/cikonss/ 以第一个链接网站里的字体为例 选择自己需要图标,点击右下角下载下来 继续点击右下角--点击下载 然后下载的文件一般都是这几个基本部件 把fonts文件夹复制到自己的项目中根目录中 打开css文件 把代码复制到自己的某个css文件中,然后html引用,重点

iconfont字体图标的使用

一.准备工作 1.首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以 2.登录以后,可以搜索自己需要的资源,然后直接下载使用,或者建立图标库然后再使用,例如这里以删除的图标为例 a) 搜索删除图标 b) 选择需要的图标,然后可以执行三种操作:添加入库.收藏或者直接下载,可以根据自己的实际情况来选择相应操作,这里选择添加入库,操作完可以看到图标已经添加进右上角的购物车里了 c) 点击右上角的购物车,可以看到

菜鸟的Xamarin.Forms前行之路——实现按钮的字体图标(可扩展)

在实际的APP中,带有图标的按钮用到地方还是蛮多的,字体图标往往能更快更生动的传达信息,并且相对于背景图片,字体图标也有着绝对的优势,所以实现按钮的字体图标是值得尝试的. 实现方法:各平台自定义渲染按钮 PCL 添加名为Fonts.cs的类,作用各平台的字体文件(ios-android-uwp,ios字体文件不要后缀并且大写,安卓全称) public static class Fonts { public static string IconFont= Device.OnPlatform("Ic

Bootstrap 字体图标、下拉菜单

Bootstrap 字体图标(Glyphicons) 需要引入fonts文件夹中的文件,而且该文件夹必须命名为fonts,然后引进css文件,jQuery文件,以及bootstrap的js文件. 用法很简单,需要哪个图标就在该元素上添加相对应的css文件,一般用在超链接以及按钮上面. 可以通过设置元素style属性的font-size来决定元素的大小.可以通过设置元素的color属性设置图标的颜色.可以通过设置元素的text-shadow属性设置阴影效果 <button class="bt

Bootstrap 字体图标(Glyphicons)

Bootstrap 捆绑了 200 多种字体格式的字形.首先让我们先来理解一下什么是字体图标. 什么是字体图标? 字体图标是在 Web 项目中使用的图标字体.虽然,Glyphicons Halflings 需要商业许可,但是您可以通过基于项目的 Bootstrap 来免费使用这些图标. 获取字体图标 我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本,并理解了它的目录结构.在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件: glyphicons-halflings-

Bootstrap&lt;基础十一&gt;字体图标(Glyphicons)

字体图标(Glyphicons),并通过一些实例了解它的使用.Bootstrap 捆绑了 200 多种字体格式的字形. 获取字体图标 我们已经在 环境安装 章节下载了 Bootstrap 3.x 版本,并理解了它的目录结构.在 fonts 文件夹内可以找到字体图标,它包含了下列这些文件: glyphicons-halflings-regular.eot glyphicons-halflings-regular.svg glyphicons-halflings-regular.ttf glyphi

Bootstrap入门(七)组件1:字体图标

包括200个来自 Glyphicon Halflings 的字体图标,允许 Bootstrap 免费使用. 部分可用图标截图: 所有图标都需要一个基类和对应每个图标的类.把下面的代码放在任何地方都可以正常使用.注意,为了设置正确的内补(padding),务必在图标和文本之间添加一个空格. 注意: 1.不要和其他组件混合使用 图标类不能和其它组件直接联合使用.它们不能在同一个元素上与其他类共同存在.应该创建一个嵌套的 <span>标签,并将图标类应用到这个 <span> 标签上. 2