二、矢量图标使用

1、进入：http://www.iconfont.cn/  搜索你图标的关键字，然后将需要的图标字体加入购物车

加入购物车之后，添加到项目

2、点击查看在线连接，生成css代码，把代码复制到css文件中。

3、在HTML中需要使用到该图标的位置用<em>或则<i>标签，里面写上所用图标下面的Unicode；；并且使用iconfont类名。

eg.  <em class="iconfont "></em>

4、如果自己想要设置颜色和大小等，可以添加一个类，然后设置它的css属性。

iconfont-矢量图标字体的更多相关文章

  1. （原创）IconFont（矢量图标字体）在Winform中的应用

    一.前言 很多时候,使用矢量图形可以带来非常美观的界面效果,比如SVG的使用.但是Winform原生是不支持显示SVG图像的,所以退而求其次,可以使用IconFont来实现相似的矢量效果. 先来个图解 ...

  2. Dripicons – 精美的扁平风格的免费矢量图标字体

    Dripicons 是一个好看的免费图标集,有超过 90 个扁平风格的图标,适用在 Web 应用程序中使用,如:箭头,媒体,图表等等. 集合多种矢量格式(PSD,AI,EPS,PDF,SVG),也可以 ...

  3. Nuxt使用iconfont矢量图标

    Nuxt可以使用各种前端UI框架,这些框架一般都自带的有一些icon图标可供用户使用,但是一般项目开发的时候,UI框架自带的icon是不能满足实际项目需求的,这个时候我们可以自己找一些图片放到本地项目 ...

  4. Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_143 每一个应用程序,其实都会有分享的需求,比如一键分享一篇文章或者一些活动到微博或者微信亦或者是twitter等社交平台,因为人 ...

  5. Iconfont矢量图标平台全面升级

    阿里UX矢量图标库今天全新发布上线了,这次升级相对于老版本做了30多项功能和体验上的改善:赶快来体验一下吧!! 请猛戳:www.iconfont.cn 请猛戳:www.iconfont.cn 设计师p ...

  6. Iconfont 矢量图标库的应用

    前言: 在项目开发中,不免在标签栏,工具栏等应用各种各样的小图标. 然后老旧的做法就是要UI设计出各种图标并生成图片给到我们,但是这样就存在了一个问题,每次请求页面的时候就需要发送请求请求图片,这样不 ...

  7. iconfont-矢量图标字体的运用

    发现一个奇怪的现象:(http://m.muzhiwan.com) 这里面的图标竟然不是一张张小图标图片?Firebug下查看一下元素,竟然是这样的: 页面源代码如下: 好奇怪啊,这些个乱七八糟的&a ...

  8. 开源图标字体 uiw-iconfont v1.2.6 发布，新增图标

    uiw-iconfont v1.2.6 已发布,uiw-iconfont 是从 uiw 组件库抽离出来的图标字体,基于 svg 图片生成的图标字体. 更新内容 新增 map android-o das ...

  9. 图标字体(IconFont)制作

    图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face) ...

  10. 分享一组矢量图标–UX图标字体库

    以下内容转自:http://ux.etao.com/,原文链接:http://ued.alimama.com/posts/219 科技日新月异的今天,市面上各种分辨率.各种显示精度的显示设备层出不穷, ...

随机推荐

  1. 单点登录(二)----实战------简单搭建CAS---测试认证方式搭建CAS

    我们在上一篇文章中已经介绍了cas以及它的工作流程. 单点登录(一)-----理论-----单点登录SSO的介绍和CAS+选型 本章我们开始动手搭建一个完整的cas服务实现2个web之间的单点登录. ...

  2. Kafka 接受数据并消费到hbase数据库

    一. 1.生产者 产生数据 package kafakaTohbase; import java.util.Properties; import kafka.javaapi.producer.Prod ...

  3. fzyzojP3782 -组合数问题

    这个ai<=2000有点意思 启发我们用O(W^2)的算法 FFT不存在,对应关系过紧 考虑组合意义转化建模,再进行分离 (除以2不需要逆元不懂为啥,但是算个逆元总不费事) 由于终点可能在起点的 ...

  4. web项目中classPath指的是哪里？

    classpath可以是SRC下面的路径 但是项目最终编译会到WEB-INF下面,所以有时候WEB-INF下面的classes也可以放配置文件,也可以读取到. 因为最终src都会放到WEB-INF下面 ...

  5. Chapter11(关联容器)--C++Prime笔记

    1.关联容器: map关键字-值对,经常被称为关联数组 set中每个元素只有一个关键字,即只保存关键字的容器 ①允许重复的关键字的容器名字都包含multi. ②不保持关键字顺序存储的容器的名字都以但粗 ...

  6. 交互式shell脚本对话框----whiptail指令

    当你在linux环境下setup软件的时候就会有相应的对话框让你输入.虽然我们已经习惯了这种交互的方法,但是如果有一种直观的界面来输入是不是会更加友好和方便呢,在shell脚本中你可以使用-whipt ...

  7. GO_02：GO语言开篇

    Go的发展史 Go 是一个开源的编程语言,它能让构造简单.可靠且高效的软件变得容易. Go是从2007年末由Robert Griesemer, Rob Pike, Ken Thompson主持开发,后 ...

  8. [大数据]-hadoop2.8和spark2.1完全分布式搭建

    一.前期准备工作: 1.安装包的准备: VMware(10.0版本以上) : 官方网站:https://www.vmware.com/cn.html 官方下载地址:http://www.vmware. ...

  9. 安装VisualSVN Server 报错The specified TCP port is occupied

    安装过程中报错,如下图所示. The specified TCP port is occupied by another service.Please stop that service or use ...

  10. 简明python教程笔记

    自然字符串 如果你想要指示某些不需要如转义符那样的特别处理的字符串,那么你需要指定一个自然字符串.自然字符串通过给字符串加上前缀r或R来指定. r"Newlines are indicate ...