Skip to main content

Attach a Font awesome icon to bottom right of an image using HTML and CSS?

<html> <style> .profile-item { text-align: center; border: none; } .profile-picture { padding: 2px; border-radius: 0%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; margin: 0 auto; width: 300px; height: 300px; overflow: hidden; position: relative; } .profile-picture img { width: 240px; height: 240px; margin-top: -5px; text-align:center; } </style> <body> <div class="profile-item" style="height:400px;"> <div class="profile-picture big-profile-picture"> <img src="http://s3.amazonaws.com/37assets/svn/765-default-avatar.png" > <span style="position: absolute;bottom: 45px;right: 0;"><i style="color:white;padding:5px; border-radius:50%;background:#FFd700;border:2px solid #FFd700;" class="fa fa-trophy fa-3x"></i></span> </div> </div> </body> </html>



Live Jsfiddle:  http://jsfiddle.net/akhilreddyyalla/prtkqb44/910/

Comments

Post a Comment

Popular posts from this blog

Send Email(with subject,body,attachment) using SSMTP through Terminal in linux?

1.Install ssmtp as              $ sudo apt-get update && sudo apt-get install ssmtp 2.Configure smtp file by editing the following file as, $ sudo gedit /etc/ssmtp/ssmtp.conf Update file with the following: AuthUser=Sendermail@gmail.com AuthPass=SenderPasswordforGMAIL FromLineOverride=YES mailhub=smtp.gmail.com:587 UseSTARTTLS=YES Now ssmtp.conf file should look like as the following one, AuthUser=Sendermail@gmail.com AuthPass=SenderPasswordforGMAIL # # Config file for sSMTP sendmail # # The person who gets all mail for userids < 1000 # Make this empty to disable rewriting. root=postmaster # The place where the mail goes. The actual machine name is required no # MX records are consulted. Commonly mailhosts are named mail.domain.com mailhub=smtp.gmail.com:587 # Where will the mail seem to come from? #rewriteDomain= # The full hostname hostname=tele-desktop118 # A...
1 comment
Read more

Mark all checkboxes based using one checkbox

< html > < body > < label >< b > Year* </ b ></ label > < input type= "checkbox" id= 'year' class= "yearcheckall" value= "0" >< b > All </ b > < input type= "checkbox" name= "year[]" class= "year" value= "1" required > 1st Year < input type= "checkbox" name= "year[]" class= "year" value= "2" required > 2nd Year < input type= "checkbox" name= "year[]" class= "year" value= "3" required > 3rd Year < input type= "checkbox" name= "year[]" class= "year" value= "4" required > 4th Year </ body > </ html > < script type = "text/javascript" src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" ></ script > < script > $ ( ...
Post a Comment
Read more

What is CronTab? What does it do?

What if you want to execute a file daily at particular time ? Running it manually daily is  absolutely not a good idea ..!   Then What do you do ? For this kind of manual works , To Automate it , there is a daemon in linux called "CRONTAB" . Crontab : Crontab called as CRON TABle Where  cron is a daemon to run periodically on a given time and Table consists of scheduled tasks , jobs  i . e , Crons . Crontab Options:    crontab - l : lists all the crontabs scheduled . crontab - e : Edits existing cron or else create new cron. crontab - r : Removes scheduled cron jobs . crontab - i - r : Prompts before deleting user 's crontab i.e,asks your permission.  crontab -u username -l : lists all the crons of a particular user.    Setting up a cron: Press Ctrl+Alt+t to open the terminal ...
Post a Comment
Read more