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

Backup (or) Download MYSQL Database as a zip file Using PHP

NOTE:Please change below credentials  with respect to your Database and Run the file. <?php define ( "DB_USER" ,  'DatabaseUSERNAME' ); define ( "DB_PASSWORD" ,  'DatabasePASSWORD' ); define ( "DB_NAME" ,  'DatabaseNAME' ); define ( "DB_HOST" ,  'localhost' ); define ( "BACKUP_DIR" ,  'myphp-backup-files' );  // Comment this line to use same script's directory ('.') define ( "TABLES" ,  '*' );  // Full backup //define("TABLES", 'table1, table2, table3'); // Partial backup of required tables define ( "CHARSET" ,  'utf8' ); define ( "GZIP_BACKUP_FILE" ,  true );   // Set to false if you want plain SQL backup files (not gzipped) class  Backup_Database {     var  $host ;     var  $username ;   ...
1 comment
Read more

Difference between empty() and remove() in Jquery?

empty():                     Removes the content but not the tags i.e,div,p,span..etc. remove():                    Removes both the content and tags Live Example jsfiddle: https://jsfiddle.net/akhilreddyyalla/xpvt214o/151716/ Real life example:                               Consider a bottle having water, empty()  : empty the bottle  i.e, emptying the water from bottle but the bottle exists.   remove(): remove the bottle i.e, removing bottle with water.  
Post a Comment
Read more