堆棧內存溢出
  簡體   English   中英

HTML中的圖標未顯示在網頁上嗎？

[英]Icon in HTML is not showing up on webpage?

 原文  2017-11-16 15:49:36  3   1    html/ css/ icons

問題描述

我試圖在我的網站的登錄框中使圖標“ .png”顯示在文本“用戶名”的右側，但是我無法顯示它。 我練習了制作一個簡單的html頁面，我可以將其顯示在一個簡單頁面的屏幕上，但是當我在登錄頁面中嘗試該頁面時，卻無法使其顯示在“用戶名”旁邊。 我嘗試將.png和.ico的代碼放在“用戶名”旁邊，並在關聯的標題下的.css文件中，但是無法使其顯示。 .png和.ico文件位於根文件夾中。 我已經閱讀並觀看了許多教程，嘗試了許多不同的代碼示例，等等。任何建議將不勝感激！

我試過沒有運氣放置此代碼： 

<img src = 'sunny.png' style='vertical-align: middle' />

我的登錄HTML代碼： 

 $(document).ready(function () { $('#logo').addClass('animated fadeInDown'); $("input:text:visible:first").focus(); }); $('#username').focus(function() { $('label[for="username"]').addClass('selected'); }); $('#username').blur(function() { $('label[for="username"]').removeClass('selected'); }); $('#password').focus(function() { $('label[for="password"]').addClass('selected'); }); $('#password').blur(function() { $('label[for="password"]').removeClass('selected'); }); 
 body { background: url("../images/photo_bg.jpg") no-repeat center center fixed; background-size: cover; font-size: 16px; font-family: 'Lato', sans-serif; font-weight: 300; margin: 0; color: #666; } /* Typography */ h1#title { font-family: 'Roboto Slab', serif; font-weight: 300; font-size: 3.2em; color: white; text-shadow: 0 0 10px rgba(0,0,0,0.8); margin: 0 auto; padding-top: 180px; max-width: 300px; text-align: center; position: relative; top: 0px; } h1#title span span { font-weight: 400; } h2 { <img style='vertical-align:middle;' src='gmail.png' width="30"> <div style='vertical-align:middle; display:inline;'> Your text here </div> text-transform: uppercase; color: white; font-weight: 400; letter-spacing: 1px; font-size: 1.4em; line-height: 2.8em; } a { text-decoration: none; color: #666; } a:hover { color: #aeaeae; } p.small { font-size: 0.8em; margin: 20px 0 0; } /* Layout */ .container { margin: 0; } .top { margin: 0; padding: 0; width: 100%; background: -moz-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */ } .login-box { background-color: white; max-width: 340px; margin: 0 auto; position: relative; top: 80px; padding-bottom: 30px; border-radius: 5px; box-shadow: 0 5px 50px rgba(0,0,0,0.4); text-align: center; } .login-box .box-header { background-color: #665851; margin-top: 0; border-radius: 5px 5px 0 0; } .login-box label { font-weight: 700; font-size: .8em; color: #888; letter-spacing: 1px; text-transform: uppercase; line-height: 2em; } .login-box input { margin-bottom: 20px; padding: 8px; border: 1px solid #ccc; border-radius: 2px; font-size: .9em; color: #888; } .login-box input:focus { outline: none; border-color: #665851; transition: 0.5s; color: #665851; } .login-box button { margin-top: 0px; border: 0; border-radius: 2px; color: white; padding: 10px; text-transform: uppercase; font-weight: 400; font-size: 0.7em; letter-spacing: 1px; background-color: #665851; cursor:pointer; outline: none; } .login-box button:hover { opacity: 0.7; transition: 0.5s; } .login-box button:hover { opacity: 0.7; transition: 0.5s; } .selected { color: #665851!important; transition: 0.5s; } /* Animation Delay */ #logo { -webkit-animation-duration: 1s; -webkit-animation-delay: 2s; } .login-box { -webkit-animation-duration: 1s; -webkit-animation-delay: 1s; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <body> <div class="container"> <div class="top"> <h1 id="title" class="hidden"><span id="logo">Daily <span>UI</span></span></h1> </div> <div class="login-box animated fadeInUp"> <div class="box-header"> <h2>Log In</h2> </div> <label for="username">Username</label> <br/> <input type="text" id="username"> <br/> <label for="password">Password</label> <br/> <input type="password" id="password"> <br/> <button type="submit">Sign In</button> <br/> <a href="#"><p class="small">Forgot your password?</p></a> </div> </div> </body>

1 個解決方案

解決方案1
 0  2017-11-16 17:47:51

嘗試添加：

字體真棒 CSS URI

CheatSheet ： placeholder="&#61447; Username"

並input { font-family: 'FontAwesome'; } input { font-family: 'FontAwesome'; }放入您的CSS 

 $(document).ready(function () { $('#logo').addClass('animated fadeInDown'); $("input:text:visible:first").focus(); }); $('#username').focus(function() { $('label[for="username"]').addClass('selected'); }); $('#username').blur(function() { $('label[for="username"]').removeClass('selected'); }); $('#password').focus(function() { $('label[for="password"]').addClass('selected'); }); $('#password').blur(function() { $('label[for="password"]').removeClass('selected'); }); 
 body { background: url("../images/photo_bg.jpg") no-repeat center center fixed; background-size: cover; font-size: 16px; font-family: 'Lato', sans-serif; font-weight: 300; margin: 0; color: #666; } /* Typography */ h1#title { font-family: 'Roboto Slab', serif; font-weight: 300; font-size: 3.2em; color: white; text-shadow: 0 0 10px rgba(0,0,0,0.8); margin: 0 auto; padding-top: 180px; max-width: 300px; text-align: center; position: relative; top: 0px; } h1#title span span { font-weight: 400; } h2 { <img style='vertical-align:middle;' src='gmail.png' width="30"> <div style='vertical-align:middle; display:inline;'> Your text here </div> text-transform: uppercase; color: white; font-weight: 400; letter-spacing: 1px; font-size: 1.4em; line-height: 2.8em; } a { text-decoration: none; color: #666; } a:hover { color: #aeaeae; } p.small { font-size: 0.8em; margin: 20px 0 0; } /* Layout */ .container { margin: 0; } .top { margin: 0; padding: 0; width: 100%; background: -moz-linear-gradient(top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */ } .login-box { background-color: white; max-width: 340px; margin: 0 auto; position: relative; top: 80px; padding-bottom: 30px; border-radius: 5px; box-shadow: 0 5px 50px rgba(0,0,0,0.4); text-align: center; } .login-box .box-header { background-color: #665851; margin-top: 0; border-radius: 5px 5px 0 0; } .login-box label { font-weight: 700; font-size: .8em; color: #888; letter-spacing: 1px; text-transform: uppercase; line-height: 2em; } input { font-family: 'FontAwesome'; /* This is for the placeholder */ .login-box input { margin-bottom: 20px; padding: 8px; border: 1px solid #ccc; border-radius: 2px; font-size: .9em; color: #888; } .login-box input:focus { outline: none; border-color: #665851; transition: 0.5s; color: #665851; } .login-box button { margin-top: 0px; border: 0; border-radius: 2px; color: white; padding: 10px; text-transform: uppercase; font-weight: 400; font-size: 0.7em; letter-spacing: 1px; background-color: #665851; cursor:pointer; outline: none; } .login-box button:hover { opacity: 0.7; transition: 0.5s; } .login-box button:hover { opacity: 0.7; transition: 0.5s; } .selected { color: #665851!important; transition: 0.5s; } /* Animation Delay */ #logo { -webkit-animation-duration: 1s; -webkit-animation-delay: 2s; } .login-box { -webkit-animation-duration: 1s; -webkit-animation-delay: 1s; } 
 <link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <body> <div class="container"> <div class="top"> <h1 id="title" class="hidden"><span id="logo">Daily <span>UI</span></span></h1> </div> <div class="login-box animated fadeInUp"> <div class="box-header"> <h2>Log In</h2> </div> <label for="username">Username</label> <br/> <input type="text" id="username" placeholder="&#61447; Username"> <br/> <label for="password">Password</label> <br/> <input type="password" id="password" placeholder="&#xf084; Password"> <br/> <button type="submit">Sign In</button> <br/> <a href="#"><p class="small">Forgot your password?</p></a> </div> </div> </body>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 圖像未顯示在 HTML 網頁上 HTML 特殊字符和表情符號在 Laravel 網頁上顯示不正確 布爾瑪圖標不顯示？ HTML 在網頁前面放一個圖標 圖片未顯示在我的網頁上 嵌入式紅寶石未顯示在網頁上 網頁上顯示的php代碼 Twitter feed未顯示在網頁中 滾動條未顯示在網頁中 網頁的背景圖像未顯示在 html 中
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM