Category: Sopler

Change a Font Awesome icon on hover (using content) + Sopler news!

Hi everyone! The past few days, we made some major updates on Sopler that we started designing a long time ago.

It is now possible to set a due date or edit your items using a brand new options menu. Also, when you enter a YouTube link, a (auto-scalable) player will appear on the list! 🙂

Nonetheless, this post concerns changing a Font Awesome icon to another Font Awesome icon when the first one is on hover.

Firstly, I came across this post and a few (unrelated but helpful) answers on Stack Overflow that used the content property. Then, I thought that this might work pretty well and it did.

For example,

  <div class="divclass">
    <i class="fa fa-circle-o"></i>
  </div>

using this CSS:

.divclass{
  font-size:5em;
  color:grey;
  cursor:pointer;
}

.divclass:hover .fa-circle-o:before{
  content:"\f05d";
  color:green;
  opacity:0.4;
}

OK, the div element will be a full-width rectangle (use your Developer Toolbar to check what’s going on), but you can modify it later. Anyway, the result is: http://jsbin.com/noqiwi/

It might be trivial but it’s also a lot easier than other implementations I’ve seen so far.

Introducing Sopler, a new open web application!

Here are some exciting news: The last two of months I’ve been part of a promising project. We made a web application that uses open standards (and it’s open source). It’s called Sopler and we are the Sopler project. I worked on the UI/UX design part  (meaning, HTML5, CSS3, JQuery etc) and oh boy…I’ve learned a lot of new stuff (like Bootstrap 3, FirefoxOS etc) and there are lot’s of things to post on this blog in the near future.

What can you do with Sopler? Make a list, add some items and share the link with your friends.They can add or check some items, make comments etc…

Sopler is still in Beta but you can check our code on Github. Enjoy our new video (with english & greek subtitles available):

What can’t you see in the video? Sopler can “remember” all previous lists of an authorized user (who signed in using a social account), plus, his privileges over any item are greater than those of a non-authorized user.

That’s because a social account profile makes a user unique and in this way it’s easy to map a user to his list.

Yes, Sopler is on many social networks too: Facebook, Twitter & Google+

So, see you soon with more news 🙂