css最近使用的两种图标字体库

元气の程序媛      2022-02-11     638

关键词:


## 0. 前言

比较基础的图标加载:<img src="x.png">和块元素的背景background: url(./x.png).

页面多图标时,使用雪碧图(多个png压缩成一个png,定位来使用),减少图片所占空间。

大屏显示,为保证图标清晰度,可以使用svg格式的图片。svg是矢量图,直接更改svg代码中path的fill改变颜色。

可自编辑开源svg库 [http://www.iconfont.cn/home/index](http://www.iconfont.cn/home/index "阿里巴巴图标库")

图标字体库,图标被生成字体文件,通过class决定图标,font-size决定大小,color决定颜色。主要使用的是css中伪类:before、css3中的@font-face,因而继承了font的其他规则。

@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf‘),
url(‘Sansation_Light.eot‘); /* IE9+ */
}
div
{
font-family:myFirstFont;
}

适用:单色图标

## 1. Font Awesome

class="fa fa-name fa-size fa-pull-left" 前两个必有

优点:开箱即用

缺点:扩展麻烦,项目加载过多无用图标

[http://fontawesome.dashgame.com/](http://fontawesome.dashgame.com/)

## 2. IcoMoon

class="icon-name"

优点:易于扩展,包括自己团队做的svg图标可在官网生成相应的fonts文件

缺点:扩展更新,一旦出现问题,会影响项目其他图标的显示

[https://icomoon.io/app/#/select](https://icomoon.io/app/#/select)

## 4. 深度理解

扩展自己的图标库

1. 扩展.eot.svg.ttf.woff等相关字体库

2. 伪类

.icon-name:before {
content: "f003";
}

















css:图标与文字对齐的两种方法

(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类)在平时写页面的过程中,常遇到要把小图标与文字对齐的情况。比如:                &nb... 查看详情

如何在页面中使用fontawesome字体图标

...;库,引入html页面(是图标字体库对应的css引入html)③最后,使用"图标字体"库具体操作:制作"图标字体":①这里以http://www.iconfont.cn为例子,来制作:首先,打开网址后,页面右侧有登录按钮,先进行登录操作(后面会... 查看详情

强大而灵活的字体图标替代库iconfont

... 前言概述在开发网页制作过程中通常需要一些网页小图标,前端需要PS切图,将单个小图标icon组合成CSS雪碧图过程中,需要一些时间和精力;如果网页制作中需要的小图标icon有一套css框架库集成起来将大大提高开发效率于是... 查看详情

在vue中使用阿里图标库;在iview中使用阿里图标库

参考技术A在文件iconfont.css引入的地方加上./两种方法都可以使用 查看详情

font-awesome(一套绝佳的图标字体库和css框架)

...他不需要引入一些繁琐的文件只需要几个命令就可以直接使用icon图标方法一:css导入<linkrel="stylesheet"href="path/to/font-awesome/css/font-awesome.min.css">方法二:定义安装npminstallfont-awesome-sass复制font-awesome/目录到您的项目... 查看详情

css字体图标的制作

我介绍的这个办法是直接在 "阿里巴巴图标库"中制作的,方便快捷1.首先到 "阿里巴巴图标库"中找到你想要的图片,然后选择加入购物车 接着我们点击右上角的购物车,你会看右下角有“下载代码”,点击它,就成功... 查看详情

字体图标库使用方法

一些字体图标库的网站https://icomoon.io/app/#/selecthttp://www.iconfont.cn/http://www.bootcss.com/http://www.bootcss.com/p/cikonss/ 以第一个链接网站里的字体为例选择自己需要图标,点击右下角下载下来继续点击右下角——点击下载 然后下载... 查看详情

如何使用fontawesome字体图标

FontAwesome是一套专门为TwitterBoostrap设计的图标字体库。这标字体集几乎囊括了网页中可能用到的所有图标,除了包含TwitterBoostrap的默认图标外,还有社交收集图标、Web应用法度图标和编辑器图标等等,可以免费用于贸易项目。下... 查看详情

如何使用css设置标签的背景小图标简单

...i-iconfontaui-icon-left"></div>生成如下效果图。可以使用背景图设置,使用背景精灵图把图标放在一张图片上面,通过定位位移来找到图片。切成小图标一个位置对应一个图标。参考技术A可以用background属性,假设需要给a标... 查看详情

初始化类的两种方法?

...于类的概念问题,我想确保我以正确的方式做事。我正在使用Arduino编程并为我的项目使用一些库。库实现了一个我可以在我的项目中实例化的类。例如,AdafruitMotorShieldV2库实现了Adafruit_MotorShield类,并在示例中将该类实例化为一... 查看详情

vue添加icon图标的两种方法

方法一、方法二、参考链接:https://blog.csdn.net/woaizhuzhuxia521521/article/details/85234779 查看详情

css字体图标的使用方法

提要:对于传统的一般用css雪碧(csssprite)来搞,目前大部分网站已经主要字体图标,利用font+css或者font+html来开发,今天总结了一下,记录之~csssprite用背景图片定位,兼容性好,图标颜色丰富,但是对于网站缩放来讲,会使图... 查看详情

字体图标盒子阴影

字体图标<!DOCTYPEhtml><html><head> <metacharset="UTF-8"> <title>字体图标</title> <!--使用第三方库--> <!--<linkhref="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/f 查看详情

第一次制作和使用图标字体-icomoon(代码片段)

 开题:之前就有所耳闻,最近两天第一次运用到图标字体。刚开始嘛,一脸懵逼的状态。成功运用之后就来记录一下使用过程咯!1.打开在线生成工具:https://icomoon.io/app/#/select  2.导入本地文件或者选择图标库(1)如... 查看详情

iconfont字体图标的使用

...面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以  2、登录以后,可以搜索自己需要的资源,然后直接下载使用,或者建立图标库然后再使用,例如这里以删除的图标为... 查看详情

css3中的字体图标iconfont的问题

...t:"";阿里妈妈图标库是不是不支持css3中这么使用的?只能在html代码中插入??icomoon的为什么可以在css中使用呢?参考技术A去bootcss网站上下载一个看一下就明白了,让别人讲你自己也要了解下。.icon-cart:beforecontent:&... 查看详情

字体图标使用

最近写了一个使用bootstrap的项目,用到了字体图标,下面简要介绍一下在项目中使用字体图标的一些经验1.在使用bootstrap时,body默认的字体是西文字体,所以需要手动设置字体body{font-family:"HelveticaNeue",Helvetica,MicrosoftYahei,HiraginoSan... 查看详情

css中清除浮动的两种方式

  在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0。  对于这种情况,常见的解决方式有两种。一、增加新的div,应用clear:both属性html:1<divclass="father">2<divclass="div1">1</div>3<divclass="div2"&... 查看详情