2016-08-15 4 views
0

Я новичок в HTML. До сих пор я узнал об изображениях и о том, как их включить в HTML. У меня есть один образец веб-проекта, который я изучаю. И это имеет некоторый HTML-код, как показано нижеЧто касается значков с «i» на веб-сайте

<li><a class="close-link"><i class="fa fa-close"></i></a> 
                </li> 

И этот код создает «CROSS» (X) изображение/значок на передней части.

Вопрос 1: Как изображение нарисовано на лицевой стороне. Вообще, чтобы получить изображение, я делаю что-то вроде "<img src = "image.jpg>". Поэтому я смущен тем, как загружается изображение/значок «CROSS».

Вопрос 2. Где находится папка проекта, я могу найти это изображение/значок. Я не могу найти его в папке проекта. Есть ли специальная папка, в которой хранятся эти изображения/значки.

Вопрос 3: Каковы расширения этих изображений. "jpg" "gif" или что?

Вопрос 4: Есть ли список этих типов изображений, доступных в Интернете, которые я могу использовать в проекте.

Вопрос 5: Если список недоступен в Интернете, то как я могу создать такие изображения и добавить их, используя i тег.

Прошу вас, руководствоваться.

+1

Вы видите шрифт Удивительный код. http://fontawesome.io/ (нажмите «Примеры» для ответа на ваш основной вопрос). –

+1

Чтобы добавить к @Michael_B Font Awesome использует фактический шрифт для их создания, они не являются изображениями. Это специальные персонажи, использующие Unicode. Поэтому вы можете настроить свой цвет только с помощью CSS. –

+0

Ницца. Ты прав. Но у меня есть и другие вопросы. Как я могу найти полный список значков, доступных мне для использования. Кроме того, могу ли я создавать значки самостоятельно.? Пожалуйста, направляйте меня. – Unbreakable

ответ

1

Ответ # 1

Является CDN content delivery network получает источник из Интернета я тонкий, что вы используете что-то вроде каркаса, как fontawesome здесь ссылка (http://fontawesome.io/icon/times/).

Ответ # 2

вы не можете найти изображение в любую папку, потому что вы не загрузить его. НО вы можете скачать весь пакет, то вам придется связать этот пакет к вашим HTML что-то вроде <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> В <head> из ваших html, ссылки на месте для вашей font-awesome.min.css. здесь ссылка на инструкцию (http://fontawesome.io/get-started/)

Ответ # 3

они svg файлы

Ответа 4

да есть re bunch of them вы можете найти их всех там, просто введите то, что вы ищете, вы можете даже оживить эти значки. (http://fontawesome.io/examples/) примеры в ссылке. только быстрое объяснение
i class="fa fa-camera-retro fa-lg"></i> fa-lg <i class="fa fa-camera-retro fa-2x"></i> fa-2x <i class="fa fa-camera-retro fa-3x"></i> fa-3x <i class="fa fa-camera-retro fa-4x"></i> fa-4x <i class="fa fa-camera-retro fa-5x"></i> fa-5x
в class используется для описания имя иконы (что икона)
fa-2x является размер значка с fa-5x был самым крупным