font字体图标

落日映苍穹つ 2022-07-13 15:08 318阅读 0赞

### font ###

字体图标能够网页添加别致的字体风格样式，而且也能够起到在不同浏览器中统一字体风格的作用。  
它的扁平化设计，将网页从冗余、厚重和繁杂的装饰效果中解脱出来；它的兼容性好，从ie4就开始支持，几乎所有的浏览器都支持  
那接下来小编给大家介绍字体图标的使用方式。

#### 使用步骤 ####

*  1、先去网上下载我们需要的字体图标。(以阿里巴巴字体库为例)  
    国外：  
    [https://icomoon.io/][https_icomoon.io]  
    [http://www.bootcss.com/p/font-awesome/][http_www.bootcss.com_p_font-awesome]
    
    国内： iconfont.cn 阿里巴巴字体库  
    下载后一般是一个 iconfont.zip 文件夹
 *  2、放入到网站的站点内， font/
 *  3、在使用字体图标的html页面的css文件中作如下声明  
    ···css

@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), /* chrome、firefox */ url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ }
        /* url()中是 css文件相对于 font文件夹的路径 */

···  
\- 4、在html页面中使用字体图标  
···html example

<i> &#343G; </i>

···

[https_icomoon.io]: https://icomoon.io/
[http_www.bootcss.com_p_font-awesome]: http://www.bootcss.com/p/font-awesome/

发表评论取消回复

表情：

评论列表（有 0 条评论，318人围观）

还没有评论，来说两句吧...

相关阅读

相关什么是字体图标（Icon Font）？如何在网页中使用字体图标？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 字体图标（Icon Font） ⭐ 如何在网页中使用字体图标 ⭐ 写在最后 ------------

傷城~/ 2023年10月15日 11:16/ 0 赞/ 49 阅读

相关 Font Awesome 【图标】

前言本笔记非常简短！简介 Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何

忘是亡心i/ 2023年02月24日 13:28/ 0 赞/ 47 阅读

相关 CSS字体属性(font-family、font-size、font-weight、font-style)

CSS字体属性 CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式。字体系列 CSS使用font-family属性定义文本的字体系列。

心已赠人/ 2022年12月16日 13:24/ 0 赞/ 235 阅读

相关 css 图标字体 Font Awesome

目前我展示没有成功 .icon-close:before { content: "\e90c"; } ![请添加图片描

曾经终败给现在/ 2022年09月11日 01:26/ 0 赞/ 330 阅读

相关 font字体图标

font 字体图标能够网页添加别致的字体风格样式，而且也能够起到在不同浏览器中统一字体风格的作用。它的扁平化设计，将网页从冗余、厚重和繁杂的装饰效果中解脱出来；它的

落日映苍穹つ/ 2022年07月13日 15:08/ 0 赞/ 319 阅读

相关 angular4中引入font-awesome字体图标

引入font-awesome（3种方式实现引入你的项目当中）地址：http://fontawesome.dashgame.com/ 首先安装字体依赖文件 npm

迈不过友情╰/ 2022年05月27日 07:05/ 0 赞/ 249 阅读

相关在nuxt中引入Font Awesome字体图标库

介绍在element-ui框架中提供了一些图标样式，但是种类比较少，所以在这里提供一套更完善的字体图标库Font Awesome（[官方文档][Link 1]），下面就

柔情只为你懂/ 2022年05月09日 09:38/ 0 赞/ 426 阅读

相关【CSS】 fonts （字体）

所有CSS字体属性 font 在一个声明中设置所有的字体属性 font-family 指定文本的字体系列 font

刺骨的言语ヽ痛彻心扉/ 2022年04月11日 04:50/ 0 赞/ 332 阅读

相关 icon font字体图标字库汇总

最近在研究icon font图标字库，找了一些比较好的在线字库。大都是开源的，而且各有特色！阿里icon font字库　　http://www.iconfont.cn/

女爷i/ 2022年04月10日 09:56/ 0 赞/ 288 阅读

相关 Bootstrap教程(一)Font Awesome图标字体库

一.下载地址:[http://fontawesome.dashgame.com/][http_fontawesome.dashgame.com] ![watermark

深碍√TFBOYSˉ_/ 2022年03月18日 01:44/ 0 赞/ 386 阅读