twitter facebook google plus
sp
Ms. Thanh Huyền Ms. Ngọc Thơ Ms. Minh Trang
Loading...
Xem nhiều
02/04/2014
Hướng dẫn tạo và chèn Icon fonts trong wordPress
Bạn muốn tự mình sáng tạo ra bộ font chữ và sử dụng chúng. Dưới đây Netmoon sẽ chỉ cho bạn cách tạo ra Icon fonts và cách chèn Icon fonts trong WordPress đơn giản. Hy vọng mang lại cho các bạn những kiến thức hữu ích.

Phần 1: Tạo icon từ bộ Font Awesome bằng CSS


Icon fonts là những icons vector được tạo bởi các font chữ
Font Awesome là một web font chứa tất cả các icon từ Twitter Bootstrap framework , bằng cách ấn định giá trị content trong css, các bạn có thể tạo ra các icon theo ý muốn. Giả sử các bạn muốn tạo icon từ phần tử nào, thì chỉ việc khai báo như sau :
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
.element {
position: relative;
}

/*replace the content value with the
corresponding value from the list below*/

.element:before {
content: "\f000";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
/*--adjust as necessary--*/
color: #000;
font-size: 18px;
padding-right: 0.5em;
position: absolute;
top: 10px;
left: 0;
}
Và chỉ cần thay đổi giá trị content các bạn có thể tạo ra được các icon như sau :
tao icon
tao icon
Tao icn tu bo Font Awesome bang CSS
Tao icn tu bo Font Awesome bang CSS 0
Tao icn tu bo Font Awesome bang CSS 1
Tao icn tu bo Font Awesome bang CSS 2
Tao icn tu bo Font Awesome bang CSS 4
Tao icn tu bo Font Awesome bang CSS 5
Tao icn tu bo Font Awesome bang CSS 5
Tao icn tu bo Font Awesome bang CSS 7
Tao icn tu bo Font Awesome bang CSS 7
Tao icn tu bo Font Awesome bang CSS 8
Tao icn tu bo Font Awesome bang CSS 9
Tao icn tu bo Font Awesome bang CSS 10
Giá trị content tạo ra các icon

Phần 2: Cách dùng Icon Fonts trong WordPress Post Editor
Trong bài viết ngày hôm nay, mình sẽ hướng dẫn các bạn cách chèn các icon font vào ngay trong các bài viết thông qua post editor mà cần phải dùng bất kì đoạn HTML hay CSS nào.

Tao icn tu bo Font Awesome bang CSS 11
Icon Fonts

Đầu tiên, các bạn cần cài đặt và kích hoạt plugin WP Visual Icon Fonts. ( Bạn cần cài đặt Plugin trước)

Sau khi active plugin xong, các bạn vào menu Settings » Icon Fonts. Sẽ có 2 font cho các bạn chọn lựa để sử dụng , là Font Awesome và Genericon .

Tao icn tu bo Font Awesome bang CSS 13
Lựa chọn font

Sau khi chọn font xong, bây giờ các bạn đã có thể sẵn sàng cho việc sử dụng nó trong WordPress posts, pages, custom post types, và thậm chí là trong những file nằm tại folder theme của các bạn. Để sử dụng icon font, các bạn cần tạo hoặc chỉnh sửa một bài viết, lúc này các bạn sẽ thấy một nút bấm với chữ “Icons” kế bên nút bấm “Add Media“. Click vào nút “Icons” sẽ hiển thị một danh sách các icon cho các bạn chọn lựa để chèn vào bài viết.

Để sử dụng icon font trong theme, cách dế nhất là cứ chèn icon font bằng post editor, rồi chuyển qua chế độ Text editor rồi copy đoạn HTML code. Dán nó vào template files , nơi mà các bạn muốn hiển thị icon font.

Tao icn tu bo Font Awesome bang CSS 14
Copy HTML code dán vào template files

Netmoon.vn 5/5 . 121 dnh gi.
Gặp NetMoon trên twitter
Chia sẻ bài viết
Bình luận
Thư viện kiến thức Marketing