使用icomoon和iconfont添加字体图标

icomoon网址为 http://icomoon.io，外国网址打开较慢一些。点击想要的图标，下载完成后是一个.zip文件，解压后fonts文件夹要放到原html文件的根目录中，在style中贴上style.css中的第一段代码。

@font-face {font-family: 'icomoon';src:  url('fonts/icomoon.eot?kqb326');src:  url('fonts/icomoon.eot?kqb326#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?kqb326') format('truetype'),url('fonts/icomoon.woff?kqb326') format('woff'),url('fonts/icomoon.svg?kqb326#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}

对使用了该字体图标的标签样式写font-family: 'icomoon';，标签中的字体图标的写法是：从demo.html中打开，复制小框框；或者在标签中写&#xe9da，均能实现效果。

如果写在before或者after伪元素选择器中，在content: " "中可以复制小框框，也可以写\e9da；均能实现。

div::after {position: absolute;content: "";/* content: "\e901"; */font-family: 'icomoon';top: 15px;right: 10px;color: red;}

实现效果如下：

国内矢量图可以使用阿里矢量图iconfont，网址为http://www.iconfont.cn/，别少打字母哈，我第一次少输了一个字母，进错了网站哈哈哈哈哈哈哈哈哈哈。这个提供了三种使用方式，第三种可以使用多种颜色，只是兼容性差一些，他的网页有写每种方式的使用说明。我这里用的是第一种Unicode。下载后，将font文件夹放于根目录下，将iconfont.css文件第一段复制一哈，像icomoon的使用一样。只是iconfont提供的字体编码是给了&#x的，因此写在中的标签时复制字体编码即可，用在content中时，将&#x，换成反斜杠\即可。

总之嘞，以扭蛋为例，写在伪元素选择器中的content:" "时，是\e612，写在html中呢是&#xe612。

使用icomoon和iconfont添加字体图标相关推荐

微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用
微信小程序.uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用安装iconfont-tools npm i -g iconfont-tools 全局安装工具下 ...
微信小程序学习11：iconfont 网络字体图标使用（阿里巴巴）
微信小程序学习11:iconfont 网络字体图标使用(阿里巴巴) 使用方法 [1] 是直接下载图片,使用<image src="/static/images/v2.jpg" ...
【iconfont】字体图标
[iconfont]字体图标使用  <link rel="s ...
React Native 开发豆瓣评分（六）添加字体图标
添加依赖 yarn add react-native-vector-icons Link 依赖 react-native link react-native-vector-icons 使用默认字体图标 ...
在vscode中使用iconfont阿里字体图标
1.登录阿里巴巴矢量图标库 iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴体验团队倾力打造,设计 ...
前端使用阿里iconfont引入字体图标
打开阿里iconfont,将所要下载的图标依次添加至购物车,然后点击右上角购物车,点击添加至项目. 然后,点击Font-class,下载至本地下载完毕,解压以后,能看到有这么多的文件.win系统的 ...
如何下载及使用网页制作中的 iconfont 矢量字体图标？
谈到iconfont 直译是字体图标,没错它就是.只要做过网页的筒靴们肯定知道它是什么,上图说: 文字前面有颜色的小图标就是iconfont,那肯定有人好奇那,它为什么这样称呼,和一般图标又有什么区别 ...
[ExtJS5学习笔记]第五节使用fontawesome给你的extjs5应用添加字体图标
本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411 本文作者:sushengmiyan ------------------ ...
delphi7 中文注释字体_使用nerd-font/font-patcher为字体添加字体图标
Nerd-fonts常用来在终端下显示各种图标,这个项目的github repo下提供了许多Nerd Font字体,图标使用效果如图. 由于目前Windows Terminal还不支持设置第二字体,要 ...

使用icomoon和iconfont添加字体图标

使用icomoon和iconfont添加字体图标相关推荐

最新文章

热门文章