Raggi icon CSS

Kuwa da ikon

Yanin ba da ikon a HTML na wasan kwa kama yana amfani dashi da gaban ikon, misali Font Awesome.

Duba masanin ikon na kasa a kowace abin HTML (tsohuwa ko <i> ko <span>).

Kwarin gaban ikon kafin na yana da amfani dashi, za a iya samar da su da CSS (gabas, wuri, sha'awa da sauri).

Font Awesome ikon

إذا كنت ترغب في استخدام أيقونات Font Awesome، يرجى زيارة fontawesome.com، والانضمام إلى حسابك والحصول على الرمز وإضافته إلى جزء <head> من صفحة الـ HTML الخاصة بك:

<script src="https://kit.fontawesome.com/yourcode.js"></script>

اقرأ المزيد حول كيفية البدء في استخدام Font Awesome في دليلنا لتعلم Font Awesome 5.

تلميح:لا تحتاج إلى تحميل أو تثبيت!

مثال

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>


<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

结果：

亲自试一试

أيقونات Bootstrap

إذا كنت ترغب في استخدام أيقونات glyphicons لـ Bootstrap، يرجى إضافة السطر التالي إلى جزء <head> من صفحة الـ HTML الخاصة بك:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

تلميح:لا تحتاج إلى تحميل أو تثبيت!

مثال

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

结果：

亲自试一试

أيقونات جوجل

إذا كنت ترغب في استخدام أيقونات جوجل، يرجى إضافة السطر التالي إلى جزء <head> من صفحة الـ HTML الخاصة بك:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

تلميح:لا تحتاج إلى تحميل أو تثبيت!

مثال

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">


cloud
favorite
attachment
computer
traffic

结果：

亲自试一试