CSS 字体图标引用

Unsplash

在自己的项目中,我们或多或少的需要插入一些 icon,缺少 UI 设计天赋的我只能去搜寻现有的 icon 了,在这里推荐大家去 Iconfont 阿里巴巴矢量图标库 中去搜寻自己想要的 icon,将所选的 icon 加入到购物车当中,点击 下载代码 即可

下载购物车中的 icon 图标

项目解压后,可以看到有三个 demo 演示网页,分别对应 font-class 引用,symbol 引用,unicode 引用,里面关于字体如何引用有着详细说明,在这里就不再复述

项目文件

font-class 引用,因为本质上还是使用的字体,所以我们可以通过修改 color 属性来变化 icon 的颜色,多色 icon 会自动失色

font-class 图标

symbol 引用,使用的是 svg,所以可支持多色 icon,而单色 icon 也能通过修改 color 属性来变化 icon 的颜色

symbol 图标

unicode 引用,跟 font-class 的引用基本一致

unicode 图标

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏申龙斌的程序人生

零基础学编程030:像黑客般玩玩字符艺术

经常安装盗版软件的朋友可能会看到一些由字母组成的奇怪图案,比如下面这张图: ? (图片来自于网络) 在Python里,我们无法用字母拼出如此复杂的图案,但也可以...

3896
来自专栏拭心的安卓进阶之路

Android Focusable in Touch Mode 介绍

在学习 ListView 源码时,发现了 Focusable in Touch Mode 这个概念,注释的意思是: whether this view can...

2176
来自专栏李蔚蓬的专栏

10.1.5 布局优化利器之 Hierarchy Viewer

无论是哪本讲解布局优化的参考书,它们都不得不提到Hierarchy Viewer。不过,通常情况下,Hierarchy( 英['haɪərɑːkɪ])Viewe...

873
来自专栏顶级程序员

写一个网页进度 loading

来自:简书 作者:jack_lo 原文:www.jianshu.com/p/4c93f5bd9861 loading随处可见,比如一个app经常会有下拉...

5449
来自专栏从零开始学 Web 前端

从零开始学 Web 之 JavaScript(一)JavaScript概述

JavaScript历史 要了解JavaScript,我们首先要回顾一下JavaScript的诞生。在上个世纪的1995年,当时的网景公司正凭借其Naviga...

1182
来自专栏nice_每一天

一天带你入门到放弃vue.js(一)

每个新的框架入手都会进行一些列的扯犊子!这里不多说那么多!简简单单说一下vue吧!

1742
来自专栏lgp20151222

Java引用外部字体(路径引用)的一些坑

然后,一路踩了jvm关于字体的坑,重点是,java的报错很随意,甚至不报错,建议直接看最后面.

2051
来自专栏iOS开发笔记

iOS开发照片框架详解(一)-- AssetsLibrary

1 概要 在 iOS 设备中,照片和视频是相当重要的一部分。最近刚好在制作一个自定义的 iOS 图片选择器,顺便整理一下 iOS 中对照片框架的使用方法。在 ...

4287
来自专栏极乐技术社区

微信小程序 wx.request 的封装

自学转行到前端也已近两年,也算是简书和掘金的忠实粉丝,但是以前一直惜字如金(实在是胆子小,水平又低),现在我决定视金钱如粪土(就只是脸皮厚了,水平就那样),好了...

6468
来自专栏编程软文

H5混合开发二维码扫描以及调用本地摄像头

8203

扫码关注云+社区

领取腾讯云代金券