简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 前端学习之字体图标的使用
Blogger Information
Blog 4
fans 0
comment 0
visits 1364
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
前端学习之字体图标的使用
༒唯一࿈༒
Original
327 people have browsed it

字体图标的使用

准备工作：

1.寻找一个字体图标网站：阿里巴巴矢量图标库
2.注册并拿图标做个练习demo；
3.选择并添加一个图标到购物车
添加图标
4.创建一个新项目
创建一个项目
5.选择font class 方式使用文字图标，点击创建在线链接地址
选择使用文字图标方式
6.准备工作就绪，开始尝试使用
7.准备一个空页面fontclass.html
8.引入css 文件
9.将图片元素增加一个“iconfont” 的类名
10.复制需要展示的图标代码（添加为该标签的class 属性）

HTML页面

html页

展示效果

展示效果

注意： 添加一个新图标，需要重新生成链接引入使用
疑问：对于彩色图标应该如何上色呢

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！