Руководство пользователя шрифта Awesome

SVG Ресурсы изображений Icon CSS

note

虽然FA的下载包有一堆文件，但是最省事的就是引用all.js，只要这一个文件即可。如果引用all.css好像还需要依赖其他。

Font Awesome (сокращенно FA) — это набор библиотек иконок со следующими превосходными функциями:

  1. В дополнение к предоставлению пользователям возможности выбирать из более чем 1000 высококачественных значков.
  2. Бесконечный зум. Как использовать значок в качестве шрифта, просто укажите размер, не беспокойтесь о деформации значка, когда он становится больше
  3. Можно указать цвет, цвет фона, как шрифт

На самом деле, технически говоря, этот набор иконок уже не набор картинок, а набор шрифтов, которые используются как текст.

начать использовать

В простейшем случае вы можете использовать CSS для добавления иконок в HTML:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<nav>
  <i class="fa fa-heart"></i>
</nav>

Вы можете просмотреть эффект, то есть слева от кнопки появляется значок в виде сердца. Если вы хотите отобразить значок сам по себе, типичный способ сделать это — через метку<i>Что нужно сделать:

<i class="fa fa-heart"></i>

Однако<i>Не для того ли, чтобы выделить текст курсивом? Да, в сегодняшней ситуации внешний вид делается с помощью CSS, предыдущийiКак метка с заданным стилем, метка очень одинока.На самом деле, в большинстве случаев, хотя текст в этой метке по-прежнему может быть выделен курсивом по умолчанию, все не будут использовать ее в таком виде.Эта метка уже использовалась.Устарело , лучше снова включить его здесь. На самом деле для отображения значка можно использовать множество тегов, например, тег b. Я использую i, так как это также может быть сокращением от Icon.

Давайте еще раз посмотрим, если вы укажете цвет и размер цвета фона:

 <i class="fa fa-heart" style="color:red;background: blue;font-size: 3rem"></i>

Да, действительно можно указать эти три его свойства, как шрифт. Он может быть таким большим, как есть!

В следующем коде курсив и полужирный шрифт тегов i и b все еще можно использовать, но после установки класса фактический внешний вид управляется CSS:

<nav>
  <i>I am Italic</i>
  <b>I am Bold</b>
  <i class="fa fa-heart"></i>
  <b class="fa fa-heart"></b>
</nav>

Другое использование — выбор использования SVG. FA — это только значок шрифта в форме SVG. Поскольку SVG — это векторная графика, он по-прежнему имеет характеристики бесконечного масштабирования.

<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js" integrity="sha384-3LK/3kTpDE/Pkp8gTNp2gR/2gOiwQ6QaO7Td0zV76UFJVhqLl4Vl3KL1We6q6wR9" crossorigin="anonymous"></script>
<nav>
  <i class="fa fa-heart" style="color:red;background: blue;font-size: 3rem"></i>
</nav>

Вы обнаружите, что файл, на который ссылается SVG, изменился с CSS на файл JS, и когда вы откроете этот файл, значок в форме сердца все еще может отображаться, но когда вы посмотрите на состав элемента, вы увидите, что тег i заменяется тегом SVG Инструкции SVG для рисования векторных диаграмм одну за другой.

Что входит в комплект FA

Комплект FA можно скачать по этому адресу:

https://use.fontawesome.com/releases/v5.1.0/fontawesome-free-5.1.0-web.zip

Содержание следующее:

LICENSE.txt	js		metadata	sprites		webfonts
css		less		scss		svgs

Давайте посмотрим, для чего нужны эти каталоги:

  1. All.css, который мы используем, находится в каталоге css, и в этом каталоге есть другие файлы, но пока они нас не интересуют.
  2. Используемый нами файл all.js находится в каталоге js, и другим файлам пока все равно.
  3. Шрифты различных форматов находятся в директории webfonts.Здесь находятся все иконки шрифтов.Существует множество стандартных шрифтов,но на уровне использования нам не нужно об этом заботиться,потому что эти файлы шрифтов используются css.Мы только нужно обратиться к css и убедиться, что все файлы в этом каталоге есть.
  4. Файл svgs — это исходный файл, в котором мы используем эту библиотеку значков шрифтов в SVG, но он также используется файлом all.js, и пока нас не интересуют подробности. Если вы заинтересованы в svg, вы можете войти в этот каталог и использовать браузер, чтобы открыть эти файлы.Браузер может открывать эти файлы и отображать соответствующую векторную графику. Вы также можете использовать инструменты редактирования файлов для открытия файлов SVG, это всего лишь некоторые файлы XML, они текстовые, поэтому их можно открывать и читать напрямую.
  5. В каталоге спрайтов все svg, которые необходимо использовать, упакованы в один файл, цель — оптимизировать производительность передачи в HTTP, потому что в HTTP эффективнее передавать большой файл, чем несколько маленьких файлов, разделенных.
  6. И less, и scss являются файлами исходного кода css, которые можно использовать для создания файлов css.

Метод прямого использования исходного шрифта

Мы можем использовать FA через CSS или SVG+JS, но мы также можем использовать файл шрифта напрямую, если мы знаем код шрифта в файле, мы можем использовать его напрямую.

В следующем случае мы используем шрифт WOFF:

<style>
	.fa.fa-bars {
		font-size: 28px	;
		color:red;
		background: blue;
	}
	@font-face {
	font-family: FA;
	src: 
	url("./fonts/fontawesome-webfont.woff") format("woff");
	}
	.mytextwithicon {
    position:relative;
	}    
	.mytextwithicon:before {
		content: "\f0c9";  
	    font-family: FA;
	    font-size: 18px;
	    left:-5px;
	    position:absolute;
	    top:0;
	 }
</style>
<span class = "mytextwithicon"></span><br/>
<i class = "mytextwithicon"></i>

Сначала используйте @font-face, чтобы объявить имя шрифта, например FA, а затем укажите имя файла шрифта через URL-адрес. Затем используйте шрифт FA везде, где он вам нужен, как и любой другой шрифт, такой как Sans, Rome и т. д. Мы указываем его в mytextwithicon, чтобы добавить значок перед ограниченным элементом. Код значка "\f0c9", что означает, что это значок бара. Для таблицы сравнения кода и значка вам нужно увидеть соответствующее описание файла шрифта.

Методы, встроенные в пользовательский элемент

Если FA может быть встроен в пользовательский элемент HTML, это означает, что его можно использовать в качестве элемента управления для настройки значков.Это очень хорошее программирование на основе компонентов, но немного особенным является то, что использование пользовательского элемента означает, что Shadow DOM нуждается для использования, то файлы CSS, импортированные в HTML, не могут повлиять на Shadow DOM. Хотите иметь эффект, например, снова импортировать его в Shadow DOM. Метод заключается в следующем:

<link rel="stylesheet" href="../font/css/font-awesome.min.css">
<template id="r-demo">
	<style>
	   @import url("../font/css/font-awesome.min.css")
	</style>
	<nav>
	  Icon:<button class="fa fa-search">Click Me!</button>
	</nav>
</template>
<script type="text/javascript">
var importDoc = document.currentScript.ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
	createdCallback: {
		value: function() {
			var t = importDoc.querySelector("#r-demo");
			var clone = document.importNode(t.content, true);
			this.createShadowRoot().appendChild(clone);
		}
	}
});
document.registerElement("r-demo", {prototype: proto});
</script>
<r-demo></r-demo>

Ключ здесь:

@import url("../font/css/font-awesome.min.css")

Несколько неожиданно ввели два раза, оба файла один и тот же.

Категории