字体图标的使用步骤

更新日期: 2019-11-10阅读: 2.2k标签: 图标

一.字体图标的优点

体积小,本质是字体,可以改变颜色,大小,背景等。


二.使用步骤

1.UI人员设置svg格式交给前端人员

2.前端上传svg格式生成兼容性字体文件包

登陆https://icomoon.io->点击右侧IcoMoon App->点击左上角New Empty Set->把SVG文件拖入Unititled Set里面即可

3.下载兼容性字体文件包到本地

如果公司不设置字体图标,第一,第二步跳过了。

选中需要的图标->generate Font->会进入Download页面(这个页面中可以看到图标码)->Download->本地就有icomoon.zip了,解压之后的demo.html不要删除,可以参考,即使我们只需要用fonts文件夹。

4.把字体文件包引入页面中

4.1.把fonts文件夹复制到项目中。

4.2. 声明 

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

4.3.给盒子使用字体,一定保证和上面的 font-family相同

第一种:

span {
    font-family: "icomoon";  
    font-size: 100px;
    color: pink;
}

第二种:

div::before {
    font-family: "icomoon";  /* 一定保证和上面的 font-family: 相同 */
    font-size: 100px;
    color: hotpink;
    content: "\e91b";(注意:这里要加个反斜杆+demo的字体码)
 }

5.追加字体

把与fonts同级的selection.json通过https://icomoon.io/app/#/select上传,点击import Icon即可,原来的图标会显示出来,可以追加新的,再下载下来就可以。


链接: https://fly63.com/article/detial/6356

html中为何经常使用<i>标签来作为小图标呢?

很多网站都是习惯使用<i></i>来代表小图标?而实际上用 <i> 元素做图标在语义上是不正确的(虽然看起来像 icon 的缩写),那么用<i>表示小icon,是出于好记的原因吗,还是看上去有点像icon?这样不是违背了语义化的原则吗?

微信分享图标设置,以及wx.config配置

页面分享微信显示小图和描述的功能,微信就会抓取这张图片做为分享图片,微信对自定义分享内容作了限制,于是最终还是得回到配置wx.config上来。

利用伪元素:before和:after插入图标

如果你想在网页的某些文字前加图标或者想改变li元素默认的图标,你会如何做?本文价绍一种不用再额外添加html标签,存粹利用css就能插入或者自作图标的方式。

HTML中title前面小图标的实现_如何给网页标题添加icon小图标

今天给大家分享的是如何在网页标题中加入小图标,你的图标格式最好是.ico格式的,为了兼容性考虑,使用的颜色不要超过16色,这里这个图标的命名要求必须为favicon.ico

css图标库_css常用的矢量图标大全

这篇文章主要介绍前端常用的css图标库有哪些?比如:阿里巴巴矢量图标库Iconfont、Font Awesome、Cikonss、Glyph Icons、Simple Line Icons等等,使用css图标,可以通过样式对他进行设置字体颜色,大小等

网页中favicon.ico图标的作用、尺寸、制作

网站favicon.ico文件的用途很简单,就是在浏览器标签里,最前面显示的那个logo,对于网站 favicon.ico 图标的大小,建议大家选择 16x16 或者 32x32,再大也是完全没有必要的。favicon.ico

图标使用新姿势- react 按需引用 svg 的实现

图标是前端在业务开发中不得不写的一个东西,以我司的几个部门为例,每个组在写图标上都有不一样的方式:用户平台:单色图标用 iconfont 上提供的字体文件,彩色图标用 img 引入代替或者使用iconfont 上提供的 symbol.js 。

font-awesome图标转为图片

font-awesome图标是字体,专业术语叫 Icon Font,本质上是使用 PUA ( Private Unicode Area )码位 Unicode 编码的字符,所以font-awesome图标、Bootstrap 的图标和 Wingdings 字体都是一样的,不一样的无非是编码。

Bootstrap图标

小图标icon是一个优秀Web中不可缺少的一部分,起到画龙点睛的效果。在Bootstrap框架中也为大家提供了250多个不同的icon图片。本文将详细介绍Bootstrap图标,Bootstrap框架中的图标都是字体图标

纯css制作电闪雷鸣的天气图标

使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案;after伪元素写下面的投影样式;before伪元素写黄色闪电的样式;用两个嵌套的div容器就可以了,父容器来控制图标显示的位置

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!