html引入阿里在线css文件夹,阿里字体css代码引入方法

本文介绍了如何使用Iconfont阿里字体图标,包括添加图标库、下载代码、放置样式文件以及在HTML中引用。同时,讨论了CSS代码重构的重要性,如提高性能和可维护性,并提供了引入CSS的四种方式以及代码重构的一些基本方法。文章还提到了动态生成CSS代码的JavaScript操作以及使用废弃标签的注意事项。
摘要由CSDN通过智能技术生成

1、第一步,选择自己想要的图标字体,添加入库。

569a8c98ec077fd8ddb4922ce07921d1.png

2、选择下载代码。

909cce38418ef82b2ef127b2eb6ac2f3.png

3、我们可以发现,有如下的代码被下载下来了。

927b6f36f58e69f8cc5d595f3308712f.png

4、我们选择iconfont.css放到自己的文件夹中。

5、然后我们根据下载下来html对应的类名,放在i标签里面或者span里面即可得到相应的样式。

f361266e8f5da5c24e39a830c69f5cd5.png

6、如果想更改字体大小或者颜色,我们可以额外进行添加样式进去。

-----------------------------------------END------------------------------------------

iconfont阿里字体图标的使用方法

我们在做web项目的时候,之前比较常用的是bootstrap,所以使用font awesome字体图标比较多,无意中在一个项目中接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常 ...

CSS基础-引入方法,选择器,继承

一.CSS引入方法:行内式.嵌入式.导入式.链接式. 1.行内式. 即:在标签的style属性中设定CSS样式. 例子:

CSS代码重构与优化之路

作者:@狼狼的蓝胖子 网址:http://www.cnblogs.com/lrzw32/p/5100745.html 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多, ...

用js动态生成css代码

有时候我们需要利用js来动态生成页面上style标签中的css代码,方法很直接,就是直接创建一个style元素,然后设置style元素里面的css代码,最后把它插入到head元素中.但有些兼容性问题我 ...

CSS代码重构

CSS代码重构的目的 我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护.我们对CSS代码重构主要有两个目的:1.提高代码性能2.提高代码的可维护性 提高代码性能 提高 ...

CSS代码重构与优化

CSS代码重构的基本方法 前面说到了CSS代码重构的目的,现在我们来说说一些如何达到这些目的的一些基本方法,这些方法都是易于理解,容易实施的一些手段,大家平时可能也不知不觉地在使用它. 提高CSS性能 ...

随机推荐

OpenGL入门

OpenGL是个啥... 网上资料挺多的,今天在codeblocks配置了一下..抄了一会书上的代码,还挺有意思的. 首先,从官网把glut的包给下载下来,点这里. 以下内容从网上抄的: 将glut. ...

使用Obsolete特性来标记方法过时或弃用

我们在维护一些老的系统的时候,经常会遇到某个方法不再使用的情况,我们又不能直接将其删除,因为系统中可能还有很多地方有引用它,所以比较安全保险的做法是,使用Obsolete特性来标记它过时或弃用.如下代 ...

Python学习教程(learning Python)--2.3 Python自定义函数传参函数设计

Python里自定义子函数时,可以在调用时携带一些参数到子函数里去处理.具体用法结构如下: def func(arguments): statement statement etc. 定义子函数一定要 ...

bestcoder.hdu.edu.cn

http://bestcoder.hdu.edu.cn/ Problem A 题目链接: http://bestcoder.hdu.edu.cn/contests/contest_showproble ...

Android-Bluetooth Low Energy(BLE)

Android Bluetooth Low Energy Android 低功耗蓝牙简介 2016-4-18 Android4.3(API 18)介绍了平台支持的低功耗蓝牙,app可用于发现设备,检索 ...

Cocos2D iOS之旅:如何写一个敲地鼠游戏(四):创建TexturePacker自动脚本

大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...

手写代码注意点--java.util.Stack相关

1-Stack的基本函数为: 注意: 取栈顶的函数为peek(),不是top()... 测试stack是否为空的函数为empty(),不是isEmpty()...

[No0000193]Chrome浏览器控制台(console)花式调试

对前端开发者来说,Chrome Dev Tools(开发者工具,以下简称CDT)是一个不可或缺的开发调试工具,但是你可能只用过console.log(),却不知道console还有很多功能强大的调试方 ...

Git实战手册(二): 标签应用和版本管理

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值