25/04/2018 17:30

Thông báo

VinaBB đang trong trạng thái vọc phá liên tục, mọi trang đều có thể xuất hiện lỗi >w< O:)
Nếu bạn không thể gửi bài trong diễn đàn hỗ trợ, hãy gửi tin nhắn cho chúng tôi qua Facebook: https://facebook.com/vinabb

Nâng cấp Font Awesome 5 cho giao diện phpBB

Nâng cấp Font Awesome 5 cho giao diện phpBB
nedka
Sau thời gian gây quỹ trên Kickstarter, Font Awesome đã ra mắt phiên bản 5 hoàn toàn mới hỗ trợ SVG đầy hiện đại so với phiên bản 4 trước đó chỉ dùng CSS. Nếu yêu thích cái mới, chắc hẳn bạn sẽ không để cho giao diện phpBB của mình phải quẩn quanh với những biểu tượng cũ đã nhàm chán.

Font Awesome là gì?
Nếu bạn vẫn chưa nghe gì về cái tên Font Awesome, thì đây là một gói biểu tượng dùng trong thiết kế web. Font Awesome được đóng gói và phát hành dưới dạng một phông chữ nền Web, tương tự như Google Fonts. Khi thiết kế giao diện, nếu bạn dùng từng tập tin hình ảnh riêng lẻ cho mỗi biểu tượng thì có bao nhiêu biểu tượng là có bấy nhiêu truy vấn HTTP gửi đến máy chủ mỗi lần trang được tải. Nhờ đóng gói lại dưới dạng một tập tin phông chữ, giờ đây số truy vấn chỉ còn lại là 1 mặc cho có bao nhiêu biểu tượng cần hiển thị. Và từ lần tải trang thứ hai sẽ chẳng còn truy vấn nào nữa do nó đã được trình duyệt lưu lại vào bộ đệm.

Để hiển thị một biểu tượng Font Awesome trong mã HTML, bạn dùng cặp thẻ <i> thay vì <img>:

Chép
<i class="mã_biểu_tượng"></i>
Font Awesome xuất hiện trong giao diện proSilver mặc định của phpBB từ phiên bản 3.2.0 Alpha 1, tuy nó đã được dùng trong các giao diện phpBB khác từ rất lâu trước đó.

Mã biểu tượng mới trong Font Awesome 5
Hầu hết mã biểu tượng trong Font Awesome 5 đã được đổi tên mới, chỉ còn một số ít giữ lại tên với tiền tố cũ. Các biểu tượng Font Awesome cũ chưa được sửa tên mới sẽ hiển thị vòng tròn có chấm thang và chấm hỏi (!?) để báo hiệu cho bạn biết. Mặc dù Font Awesome 5 có một tiện ích Shim giúp chuyển đổi các mã biểu tượng cũ sang mới, nhưng chúng tôi nghĩ việc cứ phải gọi tập tin Javascript này trong giao diện là không đáng nếu chúng ta chịu khó bỏ chút thời gian sửa lại hết tên mới cho rồi.

Lý do việc phần lớn mã biểu tượng cũ không tương thích là vì Font Awesome 5 có đến 4 loại biểu tượng khác nhau, mỗi loại có một tiền tố mới nên chỉ còn sót lại một ít biểu tượng với tiền tố fa fa- cũ tương thích.

Đầu tiên, các biểu tượng liên quan đến nhãn hiệu sẽ nằm trong nhóm Brands và số còn lại có 3 phong cách vẽ khác nhau:
  • Font Awesome Brands (fab fa-): Các biểu tượng liên quan đến nhãn hiệu. Phong cách vẽ của loại này tùy thuộc vào biểu tượng gốc của nhãn hiệu.
  • Font Awesome Solid (fas fa-): Kiểu vẽ nét đậm có tô màu như các phiên bản cũ.
  • Font Awesome Regular (far fa-): Kiểu vẽ nét đậm nhưng không tô màu, gần giống với các biểu tượng phong cách Material của Android.
  • Font Awesome Light (fal fa-): Kiểu vẽ nét đơn, giống như Themify, Linearicons hay Simple Line Icons. Trong Font Awesome 4 cũng có nhiều biểu tượng kiểu này với mã kết thúc là -o như fa fa-star-o, fa fa-picture-o, fa fa-check-circle-o...
Chúng ta hãy thử đổi một vài biểu tượng cũ bên dưới:
Chép
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-twitter"></i>
Sang mã Font Awesome 5 mới:
Chép
<i class="fas fa-star"></i>
<i class="fal fa-star"></i>
<i class="fab fa-twitter"></i>
Bạn có thể xem toàn bộ danh sách mã chuyển đổi tại đây.

Kiểu mới: Dùng Javascript với SVG
Thay đổi quan trọng nhất của Font Awesome 5 chính là dùng vector để vẽ biểu tượng thay vì dùng phông chữ với CSS như thế hệ trước. Nhờ có vector, bạn có thể phóng to biểu tượng đến vô cực nếu muốn mà không sợ bị "bể hình" khi vượt quá giới hạn phông chữ. Cách dùng biểu tượng trong mã HTML vẫn như cũ với cặp thẻ <i> và thông qua Javascript, Font Awesome 5 sẽ chuyển đổi chúng thành mã hình vector (thẻ <svg>). Không còn bất kỳ tập tin CSS hay phông chữ (.otf, .eot, .svg, .ttf., .woff, .woff2) dành riêng cho mỗi trình duyệt nữa.

Bạn cũng cần lưu ý đến mã CSS của giao diện, do tất cả thẻ <i> bây giờ được chuyển sang <svg> nên bạn cần xác định tên thẻ là svg để tùy biến CSS thay vì i như trước.

Mã cũ:
Chép
.card-inverse {
	a {
		i {
			color: #fff;
		}
		&:hover {
			opacity: 0.8;
		}
	}
}
Mã mới:
Chép
.card-inverse {
	a {
		svg {
			color: #fff;
		}
		&:hover {
			opacity: 0.8;
		}
	}
}

Ta cũng thay tương tự svg bằng i với jQuery.

Mã cũ:
Chép
$('nav i').on('click', function ()
{
	...
});
Mã mới:
Chép
$('nav svg').on('click', function ()
{
	...
});

Để đảm bảo sự tương thích như cũ mà không phải sửa mã như trên, bạn có thể chọn đặt cặp thẻ <svg> lồng vào trong <i> bằng cách khai báo tùy chọn:
Chép
<script>
	FontAwesomeConfig = { autoReplaceSvg: 'nest' }
</script>

Các phiên bản trình duyệt bắt đầu hỗ trợ SVG:
  • IE 11
  • Edge 16
  • Chrome 49 (Chrome 64 trên Android)
  • Firefox 58
  • Opera 9
  • Safari 11 (Safari 10.2 trên iOS)
Hiện tại, số lượng người dùng Internet có phiên bản trình duyệt hỗ trợ SVG đã lên đến 98% - một con số đáng để thực hiện ngay việc nâng cấp lên Font Awesome 5.

Kiểu cũ: Dùng CSS với phông chữ
Trong trường hợp bạn cẩn trọng vì diễn đàn của mình vẫn còn nhiều người sử dụng trình duyệt cũ, như IE 10 trở về trước, bạn vẫn có thể dùng Font Awesome 5 với kiểu cũ qua CSS một thời gian trước khi chuyển sang kiểu mới. Việc dùng kiểu CSS cũ này đã được Font Awesome khuyến cáo là có nhiều rắc rối với một vài trình duyệt và họ không thể đưa ra giải pháp khắc phục triệt để.

Khi gán phông chữ Font Awesome cho một thành phần khác, ta cũng không còn tên FontAwesome cũ nữa mà ở đây có tới 6 tên mới tùy ngữ cảnh sử dụng:

Dành cho bản miễn phí kết hợp mọi phong cách:
Chép
.example {
	font-family: "Font Awesome 5 Free";
	content: "\f007";
}
Dành cho bản thương mại kết hợp mọi phong cách:
Chép
.example {
	font-family: "Font Awesome 5 Pro";
	content: "\f007";
}
Trong trường hợp bạn chỉ dùng một phong cách vẽ của Font Awesome 5, hãy chọn tên phông chữ tương ứng:
Chép
.example {
	font-family: "Font Awesome 5 Brands";
	content: "\f17b";
}
Chép
.example {
	font-family: "Font Awesome 5 Solid";
	content: "\f007";
}
Chép
.example {
	font-family: "Font Awesome 5 Regular";
	content: "\f007";
}
Chép
.example {
	font-family: "Font Awesome 5 Light";
	content: "\f007";
}

Những tính năng mới
Thu nhỏ / Phóng to:
Chép
<i class="fas fa-magic" data-fa-transform="shrink-8"></i>
<i class="fas fa-magic"></i>
<i class="fas fa-magic" data-fa-transform="grow-6"></i>
Di chuyển lên/xuống/trái/phải:
Chép
<i class="fas fa-magic" data-fa-transform="up-6"></i>
<i class="fas fa-magic" data-fa-transform="down-6"></i>
<i class="fas fa-magic" data-fa-transform="left-6"></i>
<i class="fas fa-magic" data-fa-transform="right-6"></i>
Quay 360 độ:
Chép
<i class="fas fa-magic" data-fa-transform="rotate-90"></i>
<i class="fas fa-magic" data-fa-transform="rotate-180"></i>
<i class="fas fa-magic" data-fa-transform="rotate-270"></i>
Tạo hình đối xứng ngược dọc/ngang:
Chép
<i class="fas fa-magic" data-fa-transform="flip-v"></i>
<i class="fas fa-magic" data-fa-transform="flip-h"></i>
Kết hợp 2 biểu tượng làm một:
Chép
<i class="fas fa-pencil-alt" data-fa-mask="fas fa-comment"></i>
Kết hợp nhiều biểu tượng làm một:
Chép
<span class="fa-layers fa-fw">
	<i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
	<i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
	<i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
	<i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
</span>

60 USD cho một gói biểu tượng hoàn hảo
Font Awesome 5 có 2 phiên bản: miễn phí và thương mại (Font Awesome Pro). Điểm khác nhau cơ bản giữa 2 phiên bản chính là số lượng biểu tượng và quyền truy cập vào các kênh dành cho người phát triển.

Với phiên bản miễn phí, bạn có thể dùng tất cả biểu tượng nhãn hiệu (Brands) và phần lớn các biểu tượng nét đậm tô màu (Solid). Một vài biểu tượng đặc biệt còn lại trong gói Solid cùng với 2 phong cách vẽ mới: nét đậm không tô (Regular) và nét đơn (Light) chỉ có trong phiên bản thương mại. Font Awesome cũng dự kiến lần lượt bổ sung 54 gói biểu tượng theo chủ đề mới cho các bản phát hành sau này. Trong đó, mỗi gói sẽ có 40 biểu tượng: 10 cho phiên bản miễn phí và 30 cho bản thương mại.

Với phiên bản thương mại giá 60 USD/năm, bạn được phép truy cập vào các kênh phát triển như Github, NPM và được cấp CDN để tải nhanh Font Awesome 5 Pro trên trang web của mình. Ngoài ra, có một phiên bản máy tính dành cho bạn để vẽ nhanh các biểu tượng trên các chương trình đồ họa như Photoshop, Illustrator, InDesign... Bạn chỉ việc chọn phông chữ, gõ tên mã là có ngay hình của biểu tượng. Nếu năm tiếp theo không gia hạn thì bạn vẫn được phép sử dụng phiên bản Font Awesomne 5 Pro cũ mãi mãi ở bất cứ đâu với chỉ một lần mua bản quyền.

Hiện tại, với phiên bản Font Awesome 5.0.8, bạn có 946 biểu tượng miễn phí và 2481 biểu tượng đầy đủ nếu dùng bản thương mại. Trong đó, có 330 biểu tượng nhãn hiệu và số biểu tượng thật sự còn lại là 717, vì mỗi biểu tượng này được vẽ theo 3 phong cách khác nhau.

Nâng cấp cho giao diện phpBB của bạn
Chúng ta hãy thử cùng nhau nâng cấp Font Awesome 5 phiên bản miễn phí cho giao diện proSilver nhé! Tải về phiên bản mới nhất từ trang chủ https://fontawesome.com/.

Kiểu cũ CSS
Bước 1: Giải nén tập tin tải về.
  • Chép tập tin ./web-fonts-with-css/css/fontawesome-all.min.css đến thư mục ./assets/css/ của phpBB.
  • Chép toàn bộ thư mục ./web-fonts-with-css/webfonts/ đến thư mục ./assets/ của phpBB.
Bước 2: Gọi tập tin CSS.
Mở ./styles/prosilver/template/overall_header.html, tìm:
Chép
<link href="{T_FONT_AWESOME_LINK}" rel="stylesheet">
Thay bằng:
Chép
<link href="{{ T_ASSETS_PATH }}/css/fontawesome-all.min.css?assets_version={{ T_ASSETS_VERSION }}" rel="stylesheet">
Mở ./styles/prosilver/theme/common.css, tìm:
Chép
a.header-avatar span:after {
	content: '\f0dd';
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	padding-left: 6px;
	padding-top: 2px;
	vertical-align: top;
}
Thay bằng:
Chép
a.header-avatar span:after {
	content: '\f0d7';
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	font-size: 14px;
	padding-left: 6px;
	vertical-align: top;
}

Bước 3: Thay mã biểu tượng cũ tự động.
Chép
<?php
/**
* @ignore
*/
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);

// Start session management
$user->session_begin();
$auth->acl($user->data);
$user->setup();

// CONFIG
$style_dirname = 'prosilver';

// DATA
$fa5_shim_data = [["glass", null, "glass-martini"], ["meetup", "fab", null], ["star-o", "far", "star"], ["remove", null, "times"], ["close", null, "times"], ["gear", null, "cog"], ["trash-o", "far", "trash-alt"], ["file-o", "far", "file"], ["clock-o", "far", "clock"], ["arrow-circle-o-down", "far", "arrow-alt-circle-down"], ["arrow-circle-o-up", "far", "arrow-alt-circle-up"], ["play-circle-o", "far", "play-circle"], ["repeat", null, "redo"], ["rotate-right", null, "redo"], ["refresh", null, "sync"], ["list-alt", "far", null], ["dedent", null, "outdent"], ["video-camera", null, "video"], ["picture-o", "far", "image"], ["photo", "far", "image"], ["image", "far", "image"], ["pencil", null, "pencil-alt"], ["map-marker", null, "map-marker-alt"], ["pencil-square-o", "far", "edit"], ["share-square-o", "far", "share-square"], ["check-square-o", "far", "check-square"], ["arrows", null, "arrows-alt"], ["times-circle-o", "far", "times-circle"], ["check-circle-o", "far", "check-circle"], ["mail-forward", null, "share"], ["eye-slash", "far", null], ["warning", null, "exclamation-triangle"], ["calendar", null, "calendar-alt"], ["arrows-v", null, "arrows-alt-v"], ["arrows-h", null, "arrows-alt-h"], ["bar-chart", "far", "chart-bar"], ["bar-chart-o", "far", "chart-bar"], ["twitter-square", "fab", null], ["facebook-square", "fab", null], ["gears", null, "cogs"], ["thumbs-o-up", "far", "thumbs-up"], ["thumbs-o-down", "far", "thumbs-down"], ["heart-o", "far", "heart"], ["sign-out", null, "sign-out-alt"], ["linkedin-square", "fab", "linkedin"], ["thumb-tack", null, "thumbtack"], ["external-link", null, "external-link-alt"], ["sign-in", null, "sign-in-alt"], ["github-square", "fab", null], ["lemon-o", "far", "lemon"], ["square-o", "far", "square"], ["bookmark-o", "far", "bookmark"], ["twitter", "fab", null], ["facebook", "fab", "facebook-f"], ["facebook-f", "fab", "facebook-f"], ["github", "fab", null], ["credit-card", "far", null], ["feed", null, "rss"], ["hdd-o", "far", "hdd"], ["hand-o-right", "far", "hand-point-right"], ["hand-o-left", "far", "hand-point-left"], ["hand-o-up", "far", "hand-point-up"], ["hand-o-down", "far", "hand-point-down"], ["arrows-alt", null, "expand-arrows-alt"], ["group", null, "users"], ["chain", null, "link"], ["scissors", null, "cut"], ["files-o", "far", "copy"], ["floppy-o", "far", "save"], ["navicon", null, "bars"], ["reorder", null, "bars"], ["pinterest", "fab", null], ["pinterest-square", "fab", null], ["google-plus-square", "fab", null], ["google-plus", "fab", "google-plus-g"], ["money", "far", "money-bill-alt"], ["unsorted", null, "sort"], ["sort-desc", null, "sort-down"], ["sort-asc", null, "sort-up"], ["linkedin", "fab", "linkedin-in"], ["rotate-left", null, "undo"], ["legal", null, "gavel"], ["tachometer", null, "tachometer-alt"], ["dashboard", null, "tachometer-alt"], ["comment-o", "far", "comment"], ["comments-o", "far", "comments"], ["flash", null, "bolt"], ["clipboard", "far", null], ["paste", "far", "clipboard"], ["lightbulb-o", "far", "lightbulb"], ["exchange", null, "exchange-alt"], ["cloud-download", null, "cloud-download-alt"], ["cloud-upload", null, "cloud-upload-alt"], ["bell-o", "far", "bell"], ["cutlery", null, "utensils"], ["file-text-o", "far", "file-alt"], ["building-o", "far", "building"], ["hospital-o", "far", "hospital"], ["tablet", null, "tablet-alt"], ["mobile", null, "mobile-alt"], ["mobile-phone", null, "mobile-alt"], ["circle-o", "far", "circle"], ["mail-reply", null, "reply"], ["github-alt", "fab", null], ["folder-o", "far", "folder"], ["folder-open-o", "far", "folder-open"], ["smile-o", "far", "smile"], ["frown-o", "far", "frown"], ["meh-o", "far", "meh"], ["keyboard-o", "far", "keyboard"], ["flag-o", "far", "flag"], ["mail-reply-all", null, "reply-all"], ["star-half-o", "far", "star-half"], ["star-half-empty", "far", "star-half"], ["star-half-full", "far", "star-half"], ["code-fork", null, "code-branch"], ["chain-broken", null, "unlink"], ["shield", null, "shield-alt"], ["calendar-o", "far", "calendar"], ["maxcdn", "fab", null], ["html5", "fab", null], ["css3", "fab", null], ["ticket", null, "ticket-alt"], ["minus-square-o", "far", "minus-square"], ["level-up", null, "level-up-alt"], ["level-down", null, "level-down-alt"], ["pencil-square", null, "pen-square"], ["external-link-square", null, "external-link-square-alt"], ["compass", "far", null], ["caret-square-o-down", "far", "caret-square-down"], ["toggle-down", "far", "caret-square-down"], ["caret-square-o-up", "far", "caret-square-up"], ["toggle-up", "far", "caret-square-up"], ["caret-square-o-right", "far", "caret-square-right"], ["toggle-right", "far", "caret-square-right"], ["eur", null, "euro-sign"], ["euro", null, "euro-sign"], ["gbp", null, "pound-sign"], ["usd", null, "dollar-sign"], ["dollar", null, "dollar-sign"], ["inr", null, "rupee-sign"], ["rupee", null, "rupee-sign"], ["jpy", null, "yen-sign"], ["cny", null, "yen-sign"], ["rmb", null, "yen-sign"], ["yen", null, "yen-sign"], ["rub", null, "ruble-sign"], ["ruble", null, "ruble-sign"], ["rouble", null, "ruble-sign"], ["krw", null, "won-sign"], ["won", null, "won-sign"], ["btc", "fab", null], ["bitcoin", "fab", "btc"], ["file-text", null, "file-alt"], ["sort-alpha-asc", null, "sort-alpha-down"], ["sort-alpha-desc", null, "sort-alpha-up"], ["sort-amount-asc", null, "sort-amount-down"], ["sort-amount-desc", null, "sort-amount-up"], ["sort-numeric-asc", null, "sort-numeric-down"], ["sort-numeric-desc", null, "sort-numeric-up"], ["youtube-square", "fab", null], ["youtube", "fab", null], ["xing", "fab", null], ["xing-square", "fab", null], ["youtube-play", "fab", "youtube"], ["dropbox", "fab", null], ["stack-overflow", "fab", null], ["instagram", "fab", null], ["flickr", "fab", null], ["adn", "fab", null], ["bitbucket", "fab", null], ["bitbucket-square", "fab", "bitbucket"], ["tumblr", "fab", null], ["tumblr-square", "fab", null], ["long-arrow-down", null, "long-arrow-alt-down"], ["long-arrow-up", null, "long-arrow-alt-up"], ["long-arrow-left", null, "long-arrow-alt-left"], ["long-arrow-right", null, "long-arrow-alt-right"], ["apple", "fab", null], ["windows", "fab", null], ["android", "fab", null], ["linux", "fab", null], ["dribbble", "fab", null], ["skype", "fab", null], ["foursquare", "fab", null], ["trello", "fab", null], ["gratipay", "fab", null], ["gittip", "fab", "gratipay"], ["sun-o", "far", "sun"], ["moon-o", "far", "moon"], ["vk", "fab", null], ["weibo", "fab", null], ["renren", "fab", null], ["pagelines", "fab", null], ["stack-exchange", "fab", null], ["arrow-circle-o-right", "far", "arrow-alt-circle-right"], ["arrow-circle-o-left", "far", "arrow-alt-circle-left"], ["caret-square-o-left", "far", "caret-square-left"], ["toggle-left", "far", "caret-square-left"], ["dot-circle-o", "far", "dot-circle"], ["vimeo-square", "fab", null], ["try", null, "lira-sign"], ["turkish-lira", null, "lira-sign"], ["plus-square-o", "far", "plus-square"], ["slack", "fab", null], ["wordpress", "fab", null], ["openid", "fab", null], ["institution", null, "university"], ["bank", null, "university"], ["mortar-board", null, "graduation-cap"], ["yahoo", "fab", null], ["google", "fab", null], ["reddit", "fab", null], ["reddit-square", "fab", null], ["stumbleupon-circle", "fab", null], ["stumbleupon", "fab", null], ["delicious", "fab", null], ["digg", "fab", null], ["pied-piper-pp", "fab", null], ["pied-piper-alt", "fab", null], ["drupal", "fab", null], ["joomla", "fab", null], ["spoon", null, "utensil-spoon"], ["behance", "fab", null], ["behance-square", "fab", null], ["steam", "fab", null], ["steam-square", "fab", null], ["automobile", null, "car"], ["cab", null, "taxi"], ["spotify", "fab", null], ["envelope-o", "far", "envelope"], ["soundcloud", "fab", null], ["file-pdf-o", "far", "file-pdf"], ["file-word-o", "far", "file-word"], ["file-excel-o", "far", "file-excel"], ["file-powerpoint-o", "far", "file-powerpoint"], ["file-image-o", "far", "file-image"], ["file-photo-o", "far", "file-image"], ["file-picture-o", "far", "file-image"], ["file-archive-o", "far", "file-archive"], ["file-zip-o", "far", "file-archive"], ["file-audio-o", "far", "file-audio"], ["file-sound-o", "far", "file-audio"], ["file-video-o", "far", "file-video"], ["file-movie-o", "far", "file-video"], ["file-code-o", "far", "file-code"], ["vine", "fab", null], ["codepen", "fab", null], ["jsfiddle", "fab", null], ["life-ring", "far", null], ["life-bouy", "far", "life-ring"], ["life-buoy", "far", "life-ring"], ["life-saver", "far", "life-ring"], ["support", "far", "life-ring"], ["circle-o-notch", null, "circle-notch"], ["rebel", "fab", null], ["ra", "fab", "rebel"], ["resistance", "fab", "rebel"], ["empire", "fab", null], ["ge", "fab", "empire"], ["git-square", "fab", null], ["git", "fab", null], ["hacker-news", "fab", null], ["y-combinator-square", "fab", "hacker-news"], ["yc-square", "fab", "hacker-news"], ["tencent-weibo", "fab", null], ["qq", "fab", null], ["weixin", "fab", null], ["wechat", "fab", "weixin"], ["send", null, "paper-plane"], ["paper-plane-o", "far", "paper-plane"], ["send-o", "far", "paper-plane"], ["circle-thin", "far", "circle"], ["header", null, "heading"], ["sliders", null, "sliders-h"], ["futbol-o", "far", "futbol"], ["soccer-ball-o", "far", "futbol"], ["slideshare", "fab", null], ["twitch", "fab", null], ["yelp", "fab", null], ["newspaper-o", "far", "newspaper"], ["paypal", "fab", null], ["google-wallet", "fab", null], ["cc-visa", "fab", null], ["cc-mastercard", "fab", null], ["cc-discover", "fab", null], ["cc-amex", "fab", null], ["cc-paypal", "fab", null], ["cc-stripe", "fab", null], ["bell-slash-o", "far", "bell-slash"], ["trash", null, "trash-alt"], ["copyright", "far", null], ["eyedropper", null, "eye-dropper"], ["area-chart", null, "chart-area"], ["pie-chart", null, "chart-pie"], ["line-chart", null, "chart-line"], ["lastfm", "fab", null], ["lastfm-square", "fab", null], ["ioxhost", "fab", null], ["angellist", "fab", null], ["cc", "far", "closed-captioning"], ["ils", null, "shekel-sign"], ["shekel", null, "shekel-sign"], ["sheqel", null, "shekel-sign"], ["meanpath", "fab", "font-awesome"], ["buysellads", "fab", null], ["connectdevelop", "fab", null], ["dashcube", "fab", null], ["forumbee", "fab", null], ["leanpub", "fab", null], ["sellsy", "fab", null], ["shirtsinbulk", "fab", null], ["simplybuilt", "fab", null], ["skyatlas", "fab", null], ["diamond", "far", "gem"], ["intersex", null, "transgender"], ["facebook-official", "fab", "facebook"], ["pinterest-p", "fab", null], ["whatsapp", "fab", null], ["hotel", null, "bed"], ["viacoin", "fab", null], ["medium", "fab", null], ["y-combinator", "fab", null], ["yc", "fab", "y-combinator"], ["optin-monster", "fab", null], ["opencart", "fab", null], ["expeditedssl", "fab", null], ["battery-4", null, "battery-full"], ["battery", null, "battery-full"], ["battery-3", null, "battery-three-quarters"], ["battery-2", null, "battery-half"], ["battery-1", null, "battery-quarter"], ["battery-0", null, "battery-empty"], ["object-group", "far", null], ["object-ungroup", "far", null], ["sticky-note-o", "far", "sticky-note"], ["cc-jcb", "fab", null], ["cc-diners-club", "fab", null], ["clone", "far", null], ["hourglass-o", "far", "hourglass"], ["hourglass-1", null, "hourglass-start"], ["hourglass-2", null, "hourglass-half"], ["hourglass-3", null, "hourglass-end"], ["hand-rock-o", "far", "hand-rock"], ["hand-grab-o", "far", "hand-rock"], ["hand-paper-o", "far", "hand-paper"], ["hand-stop-o", "far", "hand-paper"], ["hand-scissors-o", "far", "hand-scissors"], ["hand-lizard-o", "far", "hand-lizard"], ["hand-spock-o", "far", "hand-spock"], ["hand-pointer-o", "far", "hand-pointer"], ["hand-peace-o", "far", "hand-peace"], ["registered", "far", null], ["creative-commons", "fab", null], ["gg", "fab", null], ["gg-circle", "fab", null], ["tripadvisor", "fab", null], ["odnoklassniki", "fab", null], ["odnoklassniki-square", "fab", null], ["get-pocket", "fab", null], ["wikipedia-w", "fab", null], ["safari", "fab", null], ["chrome", "fab", null], ["firefox", "fab", null], ["opera", "fab", null], ["internet-explorer", "fab", null], ["television", null, "tv"], ["contao", "fab", null], ["500px", "fab", null], ["amazon", "fab", null], ["calendar-plus-o", "far", "calendar-plus"], ["calendar-minus-o", "far", "calendar-minus"], ["calendar-times-o", "far", "calendar-times"], ["calendar-check-o", "far", "calendar-check"], ["map-o", "far", "map"], ["commenting", null, "comment-alt"], ["commenting-o", "far", "comment-alt"], ["houzz", "fab", null], ["vimeo", "fab", "vimeo-v"], ["black-tie", "fab", null], ["fonticons", "fab", null], ["reddit-alien", "fab", null], ["edge", "fab", null], ["credit-card-alt", null, "credit-card"], ["codiepie", "fab", null], ["modx", "fab", null], ["fort-awesome", "fab", null], ["usb", "fab", null], ["product-hunt", "fab", null], ["mixcloud", "fab", null], ["scribd", "fab", null], ["pause-circle-o", "far", "pause-circle"], ["stop-circle-o", "far", "stop-circle"], ["bluetooth", "fab", null], ["bluetooth-b", "fab", null], ["gitlab", "fab", null], ["wpbeginner", "fab", null], ["wpforms", "fab", null], ["envira", "fab", null], ["wheelchair-alt", "fab", "accessible-icon"], ["question-circle-o", "far", "question-circle"], ["volume-control-phone", null, "phone-volume"], ["asl-interpreting", null, "american-sign-language-interpreting"], ["deafness", null, "deaf"], ["hard-of-hearing", null, "deaf"], ["glide", "fab", null], ["glide-g", "fab", null], ["signing", null, "sign-language"], ["viadeo", "fab", null], ["viadeo-square", "fab", null], ["snapchat", "fab", null], ["snapchat-ghost", "fab", null], ["snapchat-square", "fab", null], ["pied-piper", "fab", null], ["first-order", "fab", null], ["yoast", "fab", null], ["themeisle", "fab", null], ["google-plus-official", "fab", "google-plus"], ["google-plus-circle", "fab", "google-plus"], ["font-awesome", "fab", null], ["fa", "fab", "font-awesome"], ["handshake-o", "far", "handshake"], ["envelope-open-o", "far", "envelope-open"], ["linode", "fab", null], ["address-book-o", "far", "address-book"], ["vcard", null, "address-card"], ["address-card-o", "far", "address-card"], ["vcard-o", "far", "address-card"], ["user-circle-o", "far", "user-circle"], ["user-o", "far", "user"], ["id-badge", "far", null], ["drivers-license", null, "id-card"], ["id-card-o", "far", "id-card"], ["drivers-license-o", "far", "id-card"], ["quora", "fab", null], ["free-code-camp", "fab", null], ["telegram", "fab", null], ["thermometer-4", null, "thermometer-full"], ["thermometer", null, "thermometer-full"], ["thermometer-3", null, "thermometer-three-quarters"], ["thermometer-2", null, "thermometer-half"], ["thermometer-1", null, "thermometer-quarter"], ["thermometer-0", null, "thermometer-empty"], ["bathtub", null, "bath"], ["s15", null, "bath"], ["window-maximize", "far", null], ["window-restore", "far", null], ["times-rectangle", null, "window-close"], ["window-close-o", "far", "window-close"], ["times-rectangle-o", "far", "window-close"], ["bandcamp", "fab", null], ["grav", "fab", null], ["etsy", "fab", null], ["imdb", "fab", null], ["ravelry", "fab", null], ["eercast", "fab", "sellcast"], ["snowflake-o", "far", "snowflake"], ["superpowers", "fab", null], ["wpexplorer", "fab", null], ["deviantart", "fab", null]];

$tpl_files = $phpbb_extension_manager->get_finder(true)
	->core_suffix('.html')
	->find_from_paths(['/' => $phpbb_root_path . 'styles/' . $style_dirname]);

$data = [];
foreach ($tpl_files as $tpl_file)
{
	$filename = $tpl_file['path'] . $tpl_file['filename'];
	$content = file_get_contents($phpbb_root_path . $filename);

	foreach ($fa5_shim_data as $row)
	{
		$row[1] = ($row[1] == null) ? 'fas' : $row[1];
		$row[2] = ($row[2] == null) ? $row[0] : $row[2];
		$pattern = "/i class=\"(icon|fa) fa\-{$row[0]}/";

		if (preg_match($pattern, $content, $matches))
		{
			// Export
			if (!isset($data[$filename]))
			{
				echo ("<hr><strong>&raquo; " . $filename . "</strong><br><br>");
			}

			echo ($matches[0] . "<br>");
			$data[$filename] = $matches[0];

			// Replace
			$content = preg_replace($pattern, "i class=\"{$row[1]} fa-{$row[2]}", $content);
		}
	}

	// Replace prefix: fa -> fas
	$pattern_fa = "/i class=\"(icon|fa) fa\-/";

	if (preg_match($pattern_fa, $content, $matches))
	{
		// Export
		if (!isset($data[$filename]))
		{
			echo ("<hr><strong>&raquo; " . $filename . "</strong><br><br>");
		}

		echo ($matches[0] . "<br>");
		$data[$filename] = $matches[0];

		// Replace
		$content = preg_replace($pattern_fa, 'i class="fas fa-', $content);
	}

	// Write
	if (isset($data[$filename]))
	{
		$phpbb_filesystem->dump_file($phpbb_root_path . 'store/' . $filename, $content);
	}
}
Hãy lưu đoạn mã bên trên thành tập tin fa5.php, tải lên thư mục gốc cài phpBB rồi chạy nó từ trình duyệt. Những tập tin giao diện được chỉnh sửa sẽ được lưu vào thư mục store của phpBB. Bạn có thể kiểm tra lại trước khi thay thế cho các tập tin hiện hữu.

Kiểu mới Javascript
Bước 1: Giải nén tập tin tải về.
Chép tập tin ./svg-with-js/js/fontawesome-all.min.js đến thư mục ./assets/javascript/ của phpBB.

Bước 2: Gọi tập tin Javascript.
Mở ./styles/prosilver/template/overall_header.html, tìm:
Chép
<link href="{T_FONT_AWESOME_LINK}" rel="stylesheet">
Thay bằng:
Chép
<script defer src="{{ T_ASSETS_PATH }}/javascript/fontawesome-all.min.js?assets_version={{ T_ASSETS_VERSION }}"></script>

Bước 3: Tương tự kiểu CSS bên trên.

Tham khảo: https://fontawesome.com/how-to-use

VinaBB • The Holy Land of phpBB

Quan điểm

Không đề cập chính trị, tôn giáo, nội dung đồi trụy.
Giữ gìn sự trong sáng của Tiếng Việt.
Không chia sẻ phần mềm vi phạm bản quyền.
Không rao vặt và không nhận đặt quảng cáo.
Dù trong túi hết tiền thì diễn đàn phpBB của anh cũng phải ngay ngắn.

Chuyện tình phpBB

17/07/2004: Yêu phpBB từ phiên bản 2.0.10.
22/10/2006: Cất tiếng cười chào đời.
11/06/2007: Chính thức định cư trên Olympus, Sao Hỏa.
11/06/2009: Mất liên lạc với Trái Đất. [ Phiên bản 2007 ]
28/07/2016: Trôi dạt đến mặt trăng Rhea, Sao Thổ.
12/12/2016: Cuộc hành trình mới lại bắt đầu…

Code in Viet Nam

Cống hiến hết mình vì Tổ Quốc Việt Nam Xã Hội Chủ Nghĩa

Quản trị viên

nedka

VinaBB
VinaBB

NEDKA Solutions

Đơn vị chủ quản

Chúng tôi chịu trách nhiệm toàn bộ nội dung có trên VinaBB trước pháp luật.
Sử dụng phần mềm phpBB
cron