CSS3基础：字体图标icon的使用

进入网站：Icon Font & SVG Icon Sets ❍ IcoMoon

点右上角iconmoon app

然后选择并下载需要的字体，得到zip文件，会有一堆文件：

解压之后将font文件夹放入html文件的根目录里面

接着在html文件的style里面加入：

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

之后在demo.html文件中找到想要的图标下面的那个小方框：

复制它写入文本：

        <div class="son"></div>

最后定义样式：

    .son{font-family: 'icomoon';font-size: 100px;color: aqua;}

结果：

有点麻烦，听说阿里的好用一点，还没尝试过。

CSS3基础：字体图标icon的使用相关推荐

字体图标 icon font
原文地址为: 字体图标 icon font Icon font icon font 指的是用字体文件取代图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点大小可以自由 ...
CSS3 iconfont字体图标的使用（很详细）
CSS3 iconfont(字体图标) 首先来看看什么是字体图标,在哪里使用? 比如天猫的商品分类栏: 还有小米商城的底部栏: 所以字体图标的使用的是比较多的,而且是很方便更改它的大小以及颜色的,还可 ...
CSS学习笔记----CSS3自定义字体图标
响应式网页字体图标作者:大漠日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icon ...
HTML5、CSS3进阶——字体图标、平面转换
1.<link rel="stylesheet" href="字体图标类"> 在对应的标签直接调用iconfont 图标名 2.iconfont上传 ...
如何在移动端app中应用字体图标icon fonts （转）
原文: http://www.cnblogs.com/willian/p/4166757.html?utm_source=tuicool&utm_medium=referral How to ...
如何在移动端app中应用字体图标icon fonts
How to use icon fonts in your mobile apps 在任何APP设计中实现可图形的矢量缩放最完美的方式是使用字体图标. 移动端的设计变的越来越复杂.原因在于多样的屏幕尺 ...
css icon设置,CSS之字体图标 icon 的多种实现
什么是icon?让我们先来看一个例子: 我们以简书为例子,图中看到的用圆圈起来的部分都是icon 这个时候你就想问了,这不就是几张图片么? 不,它不是图片,而是文字什么??这怎么可能是文字,文字怎么 ...
WinForm和WPF中使用字体图标ICON
Winform中使用桌面图标: 1.从https://www.iconfont.cn/ 网址下载对应的图标 2.新建一个Winform项目,创建字体类 (1)图中1是在突变网站下载的字体,放到根路径下 ...
原生小程序之引入 icon字体图标
目录原生小程序之引入 icon字体图标字体图标的配置原生小程序之引入 icon字体图标 icon官网 01:挑选对应的字体图标 02:添加入项目 ( 需要自己创建一个项目 ) 03:点击下 ...

CSS3基础：字体图标icon的使用

CSS3基础：字体图标icon的使用相关推荐

最新文章

热门文章