在线引用font awesome字体图标

高洛峰

Lepaskan： 2016-11-01 13:22:11

asal

2228 orang telah melayarinya

1.在HTML页面

标签里添加如下link链接

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Salin selepas log masuk

2.在页面中用标签加class类名方式呈现对应的iconfonts；

<i class="fa fa-quote-left"></i>

Salin selepas log masuk

3.根据图标选择的不同，class中的也不同，选择要调用的图标，单击就会有相应的代码。想修改样式可以直接调用类名用改变字体的方法改变图标样式。

.fa{
    font-size: 20px;
    color: #2c3e50;    
}

Salin selepas log masuk

4.更多的图标：http://www.fontawesome.com.cn/faicons/#webapp-icons

Label berkaitan：
html

sumber：php.cn

Artikel sebelumnya：web前端及HTML语义化的理解 Artikel seterusnya：HTML列表元素

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang

html设置加粗、倾斜、下划线、删除线等字体效果示例介绍

1970-01-01 08:00:00

实现一个 Java 版的 Redis

1970-01-01 08:00:00

最简单的微信小程序Demo

1970-01-01 08:00:00

python中pandas.DataFrame（创建、索引、增添与删除）的简单操作方法介绍

1970-01-01 08:00:00

微信小程序：如何实现tabs选项卡效果示例

1970-01-01 08:00:00

Python构造自定义方法来美化字典结构输出

1970-01-01 08:00:00

HTML5:使用Canvas实时处理Video

1970-01-01 08:00:00

Asp.net使用SignalR实现发送图片

1970-01-01 08:00:00

微信小程序开发教程-App()和Page()函数概述

1970-01-01 08:00:00

详解python redis使用方法

1970-01-01 08:00:00

Isu terkini

Penukaran automatik PX kepada ralat REM <style>html { font-size: calc(100vw / 3.75); }badan { saiz fon: 0.16rem; ...

daripada 2024-04-16 09:34:16

0

0

4687

Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...

daripada 2024-04-06 21:58:04

0

1

800

Bagaimana untuk menyelesaikan ruang kosong misteri di bahagian bawah halaman dalam CSS Saya cuba membina halaman web mudah menggunakan Bootstrap dan D3, tetapi saya tidak tahu b...

daripada 2024-04-06 20:22:15

0

1

454

Cara menggunakan komponen laravel dengan ruang letak malas livewire Saya ingin menambah rangka komponen laravel saya di dalam ruang letak livewire3 Perkara ya...

daripada 2024-04-06 20:02:10

0

2

543

Kaedah peringkat atas untuk menggantikan rentetan dengan kod HTML (dihasilkan daripada tatasusunan) Diberi rentetan seperti ini...$htmlPattern="Usernameis:#name#andusercompanyis#company...

daripada 2024-04-06 17:40:41

0

2

410

Topik-topik yang berkaitan
Lagi>

simbol hak cipta html

html editor dalam talian

penghasilan laman web html

ruang html

apa itu html

Bagaimana untuk menetapkan saiz fon html

html kepada txt

Bagaimana untuk menulis kod kotak teks html

Cadangan popular

url是什么意思？

DOM是什么意思

如何改变图片大小

HTML中如何将字体加粗

html图片大小如何设置

Tutorial Popular
Lagi>

Tutorial berkaitan

Cadangan popular

Kursus terkini

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)

1418665

Tutorial pengenalan PHP satu: Belajar PHP dalam satu minggu

4260195

Tutorial Video Permulaan JAVA

2495583

Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python

504730

Tutorial pengenalan berasaskan sifar PHP

859715

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)

1418665 kali belajar

Tutorial Video Permulaan JAVA

2495583 kali belajar

Pengenalan berasaskan sifar Little Turtle untuk mempelajari tutorial video Python

504730 kali belajar

Pengenalan pantas kepada pembangunan bahagian hadapan web

215462 kali belajar

Kuasai tutorial video PS dari awal

881890 kali belajar

[Web front-end] Permulaan pantas Node.js

6732 kali belajar

Koleksi lengkap kursus timbunan penuh pembangunan web asing

5246 kali belajar

Gunakan GraphQL praktikal bahasa

4387 kali belajar

Master kipas 550W mempelajari JavaScript dari awal langkah demi langkah

646 kali belajar

Sarjana Python Mosh, seorang pemula dengan pengetahuan asas sifar boleh bermula dalam masa 6 jam

22342 kali belajar

Muat turun terkini
Lagi>

kesan web

Kod sumber laman web

Bahan laman web

Templat hujung hadapan

[butang borang] kod hubungan borang mesej perusahaan jQuery

[Kesan khas pemain] Kesan main balik kotak muzik MP3 HTML5

[Navigasi menu] HTML5 kesan khas menu navigasi animasi zarah sejuk

[butang borang] jQuery bentuk visual seret dan lepas kod penyuntingan

[Kesan khas pemain] Kod pemain muzik Kugou tiruan VUE.JS

[kesan khas html5] Permainan kotak menolak html5 klasik

[Gambar kesan khas] menatal jQuery untuk menambah atau mengurangkan kesan imej

[Kesan album foto] Kesan zum hover kulit album peribadi CSS3

[Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah

[Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar

[Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka

[Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden

[Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan

[Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian

[Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet

[Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu

[bahan PNG] Bahan vektor elemen musim panas yang comel (EPS+PNG)

[bahan PNG] Empat bahan vektor lencana tamat pengajian 2023 merah (AI+EPS+PNG)

[gambar sepanduk] Burung nyanyian dan troli diisi dengan bahan vektor sepanduk musim bunga reka bentuk bunga (AI+EPS)

[bahan PNG] Bahan vektor topi pengijazahan emas (EPS+PNG)

[bahan PNG] Bahan vektor ikon gunung gaya hitam putih (EPS+PNG)

[bahan PNG] Bahan vektor siluet superhero (EPS+PNG) dengan jubah warna yang berbeza dan pose yang berbeza

[gambar sepanduk] Bahan vektor sepanduk Hari Arbor gaya rata (AI+EPS)

[bahan PNG] Sembilan bahan vektor buih sembang meletup gaya komik (EPS+PNG)

[Templat bahagian hadapan] Templat Laman Web Syarikat Pembersihan dan Pembaikan Hiasan Rumah

[Templat bahagian hadapan] Templat halaman panduan resume peribadi berwarna segar

[Templat bahagian hadapan] Templat Web Resume Kerja Kreatif Pereka

[Templat bahagian hadapan] Templat laman web syarikat pembinaan kejuruteraan moden

[Templat bahagian hadapan] Templat HTML5 responsif untuk institusi perkhidmatan pendidikan

[Templat bahagian hadapan] Templat laman web pusat membeli-belah kedai e-buku dalam talian

[Templat bahagian hadapan] Teknologi IT menyelesaikan templat tapak web syarikat Internet

[Templat bahagian hadapan] Templat laman web perkhidmatan perdagangan pertukaran asing gaya ungu