วิธีสร้างแบบอักษรไอคอนของคุณเอง Own

สารบัญ:

วิธีสร้างแบบอักษรไอคอนของคุณเอง Own
วิธีสร้างแบบอักษรไอคอนของคุณเอง Own

วีดีโอ: วิธีสร้างแบบอักษรไอคอนของคุณเอง Own

วีดีโอ: วิธีสร้างแบบอักษรไอคอนของคุณเอง Own
วีดีโอ: Create and implement your own set of icon fonts with Illustrator and Simple CSS 2024, พฤศจิกายน
Anonim

ก่อนหน้านี้ เมื่อสร้างไซต์ คุณต้องใช้ไอคอนบิตแมป มันสวยงาม แต่ไม่สะดวกด้วยเหตุผลหลายประการ วันนี้ ไอคอนเวกเตอร์ได้แทนที่ไอคอนแรสเตอร์ นี่เป็นโซลูชันดั้งเดิมและสวยงามที่จะตกแต่งและรีเฟรชไซต์ของคุณ

ตัวอย่างแบบอักษรไอคอน Icon
ตัวอย่างแบบอักษรไอคอน Icon

คำแนะนำ

ขั้นตอนที่ 1

มีบริการเว็บที่ดีสำหรับการสร้างแบบอักษรจากไอคอน เรียกว่าฟอนทาสติก เป็นบริการฟรีและไม่มีโฆษณา ขั้นตอนแรกคือการลงทะเบียนบนเว็บไซต์บริการ ไปที่เว็บไซต์ fontastic.me ป้อนที่อยู่อีเมลของคุณในช่องป้อนข้อมูล และสร้างรหัสผ่าน จากนั้นคลิกปุ่มสีเหลืองขนาดใหญ่ "สร้างแบบอักษรไอคอนของคุณ" บางครั้งมันเกิดขึ้นที่ไม่มีข้อมูลที่ยืนยันว่าการลงทะเบียนสำเร็จจะแสดงขึ้น อย่ากังวลไปเลย ไปที่ขั้นตอนต่อไป

การลงทะเบียนกับบริการ Fontastic
การลงทะเบียนกับบริการ Fontastic

ขั้นตอนที่ 2

ตอนนี้คลิกที่ปุ่ม "เข้าสู่ระบบ" ที่มุมบนขวา บนหน้าที่เปิดขึ้น ให้ป้อนอีเมลและรหัสผ่านของคุณอีกครั้ง กดปุ่ม "เข้าสู่ระบบ"

หลังจากรอสักครู่ แผงสำหรับสร้างแบบอักษรจากไอคอนจะเปิดขึ้น

เข้าสู่แผงควบคุมแบบอักษร
เข้าสู่แผงควบคุมแบบอักษร

ขั้นตอนที่ 3

นี่คือไอคอนที่มีให้เลือกมากมาย เมื่อคลิกที่ไอคอนที่คุณชอบด้วยเมาส์ ให้เลือกไอคอนได้มากเท่าที่คุณต้องการ ที่ด้านบนหลังคำว่า "เผยแพร่" จำนวนไอคอนที่เลือกจะถูกระบุ

การเลือกไอคอนเวกเตอร์
การเลือกไอคอนเวกเตอร์

ขั้นตอนที่ 4

หากคุณมีไอคอนไม่เพียงพอจากหมายเลขที่แสดง ให้เลื่อนลงไปที่ด้านล่างของหน้าและค้นหาปุ่มที่ระบุว่า "เพิ่มไอคอนเพิ่มเติม" คลิกที่มัน

การเพิ่มไอคอน
การเพิ่มไอคอน

ขั้นตอนที่ 5

หน้าที่มีชุดไอคอนเพิ่มเติมจะเปิดขึ้น บางส่วนได้รับเงินแล้ว (มีป้ายกำกับว่า "พรีเมียม") บางส่วนได้รับการชำระเงิน หากต้องการเปิดใช้งานไอคอนเพิ่มเติม ให้กดปุ่ม "เปิดใช้งาน" บนแพ็คเกจที่เลือก ตอนนี้จะปรากฏในรายการทั่วไปของไอคอนที่มีอยู่เมื่อคุณเริ่มต้นใช้งานแผงควบคุมโดยคลิกที่ปุ่ม "หน้าแรก" ในเมนูด้านบน

การเพิ่มชุดไอคอน
การเพิ่มชุดไอคอน

ขั้นตอนที่ 6

หากคุณต้องการเพิ่มไอคอนของคุณเอง ในหน้าเดียวกันที่ด้านบนขวา ให้คลิกที่ปุ่ม "นำเข้าไอคอน" คุณสามารถอัปโหลดไอคอนของคุณเองได้แล้ว โปรดทราบว่ารองรับเฉพาะรูปแบบเวกเตอร์ SVG เท่านั้น

เพิ่มไอคอนเวกเตอร์ของเราเอง
เพิ่มไอคอนเวกเตอร์ของเราเอง

ขั้นตอนที่ 7

เมื่อเลือกจำนวนไอคอนที่ต้องการแล้ว ให้กดปุ่ม "ปรับแต่ง" ที่นี่คุณจะเห็นไอคอนที่เลือกทั้งหมด และคุณสามารถกำหนดชื่อคลาสตามอำเภอใจให้กับไอคอนเหล่านั้นได้ โดยคุณจะอ้างอิงถึงพวกมันในสไตล์ CSS หรือคุณสามารถปล่อยให้ชื่อเริ่มต้นที่ระบบกำหนดให้กับไอคอนได้

ภาพรวมของไอคอนเวกเตอร์ที่เลือก
ภาพรวมของไอคอนเวกเตอร์ที่เลือก

ขั้นตอนที่ 8

กดปุ่ม "เผยแพร่" คุณสามารถดาวน์โหลดแบบอักษรไอคอนเวกเตอร์ที่สร้างขึ้นได้ที่นี่ (ปุ่ม "ดาวน์โหลด") ดาวน์โหลดไฟล์เก็บถาวรแบบอักษรที่สร้างโดยบริการลงในคอมพิวเตอร์ของคุณ

กำลังโหลดแบบอักษรไอคอนเวกเตอร์
กำลังโหลดแบบอักษรไอคอนเวกเตอร์

ขั้นตอนที่ 9

ไฟล์เก็บถาวรที่ดาวน์โหลดมีไฟล์สไตล์ CSS ไฟล์ HTML ที่มีชื่อคลาสไอคอน และโฟลเดอร์ "ฟอนต์" ที่มีฟอนต์ แบบอักษรไอคอนนี้สามารถใช้บนเว็บไซต์ของคุณได้

เก็บถาวรด้วยแบบอักษรไอคอน
เก็บถาวรด้วยแบบอักษรไอคอน

ขั้นตอนที่ 10

ในการใช้แบบอักษรของไอคอนที่สร้างขึ้น คุณต้องทำสิ่งต่อไปนี้:

- แกะเนื้อหาของไฟล์เก็บถาวรและอัปโหลดไปยังไซต์ของคุณในไดเรกทอรีที่มีสไตล์

- แทรกลิงก์ไปยังไฟล์ CSS ในส่วน HEAD ของหน้าเว็บไซต์ทั้งหมดที่จะทำงานกับแบบอักษรของไอคอนนี้

- ในโค้ดของเพจ เราใช้ชื่อของคลาสที่สร้างไว้ก่อนหน้านี้เพื่อใช้ฟอนต์ไอคอนที่สร้างขึ้นใหม่