Bỏ qua đến nội dung chính

Làm thế nào để thêm các biểu tượng, phông chữ trên theme WordPress của bạn

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Bạn có muốn thêm phông chữ-biểu tượng trên blog WordPress của mình không? Trong mùa lễ này, mọi người đều muốn tùy chỉnh blog của mình nhiều hơn để cung cấp một hình ảnh tốt hơn về sau này. Phông chữ-biểu tượng là một phần của sự sắp xếp thường xuyên được thực hiện.

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách thêm phông chữ-biểu tượng vào blog WordPress của bạn.

iconfontswp-1

Độ chính xác nhỏ trên phông chữ-biểu tượng

Phông chữ biểu tượng chứa các ký hiệu hoặc chữ tượng hình thay vì chữ và số. Những chữ tượng hình này có thể dễ dàng thay đổi kích thước thông qua mã CSS mà không ảnh hưởng đáng kể đến kích thước trang của bạn.

icomoon

Phông chữ biểu tượng có thể được sử dụng để hiển thị các biểu tượng khá phổ biến. Trên một trang web cổ điển, bạn có thể sử dụng chúng để hiển thị biểu tượng giỏ hàng, nút tải xuống, thanh trượt, nút phương tiện truyền thông xã hội và thậm chí các menu điều hướng WordPress.

Có một số phông chữ - biểu tượng có sẵn với các tùy chọn khác nhau. Trên thực tế, mọi cài đặt WordPress đều sử dụng Dashicons, đó là một bộ phông chữ. Các biểu tượng này được sử dụng trên thanh người dùng bảng điều khiển.

Dưới đây là một số dự án phông chữ-biểu tượng:

Đối với hướng dẫn này, tôi sẽ sử dụng Font Awesome, đây cũng là một trong những biểu tượng phông chữ được sử dụng nhiều nhất và miễn phí.

Chúng tôi sẽ khám phá thêm các biểu tượng phông chữ trên chủ đề WordPress của bạn. Phương pháp đầu tiên được thực hiện bằng cách sử dụng một plugin và chúng tôi cũng sẽ chỉ cho bạn cách làm mà không cần plugin.

Cách thêm biểu tượng phông chữ bằng plugin WordPress

FontAwgie được hỗ trợ bởi một số bổ sung. Sử dụng plugin cho phép bạn dễ dàng thêm biểu tượng phông chữ vào chủ đề của mình mà không thay đổi mã nguồn.

Điều đầu tiên bạn phải làm là cài đặt và kích hoạt plugin Font tốt hơn tạo ảnh vui nhộn, có sẵn trên WordPress.org. Sau khi kích hoạt plugin, bạn phải đến vị trí sau: " Cài đặt> Phông chữ tốt hơn Tuyệt vời", Để định cấu hình plugin. Tuy nhiên, plugin này có thể hoạt động mà không cần cấu hình, vì vậy người dùng không thực sự cần phải thay đổi bất cứ điều gì.

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

betterfontawesome

Plugin này cho phép bạn thêm các biểu tượng phông chữ như sau:

[tên biểu tượng = »tên lửa»]

[tên biểu tượng = "đám mây"]

[tên biểu tượng = »tai nghe»]

Bạn có thể thêm các biểu tượng vào giao diện chỉnh sửa bài viết bằng cách chọn từ các biểu tượng có sẵn. Chỉ cần tạo một bài viết mới và bạn sẽ thấy biểu tượng " Insert Biểu tượng Nút Trên thanh công cụ của trình soạn thảo trực quan.

Nhấp vào nó sẽ xuất hiện một cửa sổ mới nơi bạn có thể định vị một biểu tượng và chèn nó vào.

fa-posteditor

Bạn sẽ nhận thấy rằng plugin sẽ thêm một nút tương tự như nút này:

[tên biểu tượng = »trường đại học» lớp = »» unprefixed_group = »»]

Nếu bạn muốn thêm nhiều tùy chọn tùy chỉnh, bạn có thể thêm lớp của riêng bạn cho một kiểu tùy chỉnh.

[icon name = "University" class = "mygroup" unprefixed_group = ""] Đây là cách bạn sẽ tùy chỉnh lớp biểu tượng của mình:

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

.fa-maclasse {font-size: 100px; màu: # FF6600; } 

Nó thực sự đơn giản. Bạn nhận thấy rằng lớp được đi trước bởi "fa-". Đừng quên thêm nó vào mã CSS.

Cách thêm phông chữ biểu tượng trên WordPress theo cách thủ công

Như đã đề cập trước đó trong hướng dẫn này, tôi sẽ chỉ cho bạn cách thêm phông chữ biểu tượng vào blog của bạn theo cách thủ công.

Một số biểu tượng phông chữ như Font Awesome, có sẵn thông qua các máy chủ CDN trên toàn thế giới và có thể được liên kết trực tiếp với blog của bạn.

Bạn cũng có thể gửi các tệp của biểu tượng phông chữ này trực tiếp đến thư mục của chủ đề WordPress của bạn. Tôi sẽ chỉ cho bạn cách thêm biểu tượng phông chữ Phông chữ tuyệt vời trên blog của bạn.

Phương pháp đầu tiên:

Đây là phương pháp đơn giản nhất. Chỉ cần thêm dòng này trong phần "<head>" trong chủ đề của bạn (thường là trong tệp header.php).

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

Phương pháp này đơn giản, nhưng nó có thể gây ra nhiều xung đột với các plugin khác. Cách tiếp cận tốt nhất là tải các tập lệnh từ WordPress để thêm chúng vào hàng đợi.

function wp_load_fa () {wp_enqueue_style ('wpb-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'); } add_action ('wp_enqueue_scripts', 'wp_load_fa');

Phương pháp thứ hai:

Phương pháp thứ hai không đơn giản nhất, nhưng nó cho phép bạn có phông chữ biểu tượng trong chủ đề của mình. Tất cả bạn cần làm là tải xuống và giải nén gói biểu tượng phông chữ của bạn (tập tin nén) trong thư mục «Phông chữ» chủ đề của bạn.

Chỉ cần tải xuống biểu tượng phông chữ và đổi tên nó. Những gì bạn cần làm tiếp theo là tải phông chữ biểu tượng từ máy chủ của bạn.

ftpupload

Bây giờ bạn đã sẵn sàng tải các biểu tượng phông chữ trên chủ đề WordPress của mình, bạn chỉ cần thêm đoạn mã sau vào tệp " functions.php Của chủ đề WordPress của bạn hoặc trong của bạn Plugin WordPress.

function wp_load_fa () {wp_enqueue_style ('wpb-fa', get_stylesheet_directory_uri (). '/fonts/css/font-awesome.min.css'); } add_action ('wp_enqueue_scripts', 'wp_load_fa');

Đó là tất cả để có nó.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Cách hiển thị thủ công các biểu tượng phông chữ trên blog của bạn

Chuyển đến blog Font Awesome và xem danh sách các phông chữ có sẵn. Nhấp vào bất kỳ hình ảnh, và bạn sẽ thấy mã của hình ảnh.

fa-optinmonster

Đơn giản chỉ cần sao chép và dán và đoạn mã sau:

<i class="fa-optin-monster"></i>

Trong chế độ soạn thảo văn bản. Bạn có thể sử dụng lớp để thay đổi biểu tượng phông chữ.

Nếu bạn cần biết thêm về CSS, tôi mời bạn đọc hướng dẫn này. Đó là nó cho hướng dẫn này. Hãy chia sẻ nó với bạn bè của bạn trên các mạng xã hội yêu thích của bạn.

Bài viết này chứa comments 0

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
4 cổ phiếu
cổ phiếu2
tweet
Enregistrer2