I've tidak digunakan setiap bootstrap framework sebelumnya. Saya ingin memasukkan beberapa glyphicons di bootstrap 3 pada halaman saya. Dari apa yang saya mengerti mereka harus dimasukkan dalam bootstrap.file css yang saya've ditambahkan ke halaman saya. Ketika saya've tampak di bootstrap.file css namun saya don't melihat setiap referensi untuk mereka ? Meskipun besar file saya mungkin telah melewatkan sesuatu.
Aku telah memperhatikan bahwa ketika saya membuka dist
folder yang di-download dari bootstrap 3 ada yang terpisah folder fonts
yang berisi file yang bernama:
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Sepertinya ini adalah di mana glyphicons namun saya don't tahu bagaimana untuk melampirkan ini ke situs saya? Bagaimana cara pasang glyphicons ke halaman saya ?
Terima kasih untuk bantuan di muka
Kode di bawah ini menunjukkan terpasang bootstrap.file css:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap example</title>
<meta name="viewport" content="width=divice-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap.css" rel="stylesheet" media="screen">
</head>
dan di sini adalah bagian dari html
kode yang menunjukkan di mana glyphicons harus:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>
Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-star"></span> Top
Destinations</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span
class="glyphicon glyphicon-user"></span> About Us<b class="caret"></b></a>
Saya pikir masalah khusus anda isn't cara menggunakan Glyphicons tapi memahami bagaimana file Bootstrap bekerja bersama-sama.
Bootstrap membutuhkan struktur file tertentu untuk bekerja. Saya lihat dari kode anda anda memiliki ini:
<link href="bootstrap.css" rel="stylesheet" media="screen">
Anda Bootstrap.css yang diambil dari lokasi yang sama seperti halaman anda, ini akan menciptakan masalah jika anda tidak't menyesuaikan struktur file.
Tapi pertama-tama, biarkan saya sarankan anda mengatur struktur folder seperti berikut:
/css <-- Bootstrap.css here
/fonts <-- Bootstrap fonts here
/img
/js <-- Bootstrap JavaScript here
index.html
Jika anda perhatikan, ini adalah bagaimana Bootstrap struktur file dalam ZIP download.
Anda kemudian memasukkan file Bootstrap seperti:
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
or
<link href="./css/bootstrap.css" rel="stylesheet" media="screen">
or
<link href="/css/bootstrap.css" rel="stylesheet" media="screen">
Tergantung pada server anda struktur atau apa yang anda're akan untuk.
Pertama dan kedua relatif terhadap file's direktori saat ini. Yang kedua adalah hanya lebih eksplisit dengan mengatakan "di sini" (./) yang pertama maka folder css (css).
Yang ketiga adalah baik jika anda're menjalankan web server, dan anda hanya dapat menggunakan relatif terhadap root notasi sebagai leading "/" akan selalu mulai di root folder.
Jadi, mengapa melakukan hal ini?
Bootstrap.css ini memiliki jalur khusus untuk Glyphfonts:
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
Apa yang dapat anda lihat adalah bahwa Glyphfonts dimuat oleh naik satu direktori ../
dan kemudian mencari sebuah folder bernama /font
dan KEMUDIAN loading file font.
Alamat URL relatif terhadap lokasi file CSS. Jadi, jika anda CSS file ini di lokasi yang sama seperti ini:
/fonts
Bootstrap.css
index.html
File CSS akan satu tingkat lebih dalam dari mencari /font
folder.
Jadi, let's mengatakan lokasi sebenarnya dari file ini adalah:
C:\www\fonts
C:\www\Boostrap.css
C:\www\index.html
File CSS yang tentunya secara teknis akan mencari folder di:
C:\fonts
tapi folder anda sebenarnya dalam:
C:\www\fonts
Begitu melihat apakah yang membantu. Anda don't perlu melakukan apa-apa 'khusus' untuk memuat Bootstrap Glyphicons, kecuali pastikan struktur folder diatur dengan tepat.
Ketika anda mendapatkan yang tetap, HTML anda hanya harus:
<span class="glyphicon glyphicon-comment"></span>
Catatan, anda perlu baik kelas-kelas. Kelas pertama glyphicon
set up gaya dasar sementara glyphicon-komentar
set gambar tertentu.